当数据不足一个页面时 better-scroll 无法滚动,是因为只有content的高度大于wrapper高度时候,才可以滚动。
在这个时候可以打印 this.scroll 看看
当this.scroll.hasVerticalScroll 为fasle的时候就是content的高度小于wrapper高度
直接强制修改 this.scroll.hasVerticalScroll = true
这样就能刷新了。
<template>
<div class="main">
<div class="herder">
<div @click="modelisshow" ><i v-if="ishow" class="on">金额不限</i><i v-else>金额不限</i><img v-if="ishow" src="~assets/images/icon-v.png" /><img v-else src="~assets/images/icon-v-i.png" /></div>
<div @click="modemonshow"><i v-if="monshow" class="on">所有贷款类型</i><i v-else>所有贷款类型</i><img v-if="monshow" src="~assets/images/icon-v.png"><img v-else src="~assets/images/icon-v-i.png" /></div>
</div>
<transition>
<div class="min-show" v-if="ishow">
<ul>
<li v-for="(item, index) in list" :key="index" v-bind:class="{ active: index == sumIndex }" @click="sumclike(item,index)">{{item.name}}</li>
</ul>
<div class="bg-color" @click="modelisshow"></div>
</div>
<div class="min-show" v-if="monshow">
<ul>
<li v-for="(item, index) in mon" :key="index" v-bind:class="{ active: index == typeIndex }" @click="typeclike(item,index)">{{item.name}}</li>
</ul>
<div class="bg-color" @click="modemonshow"></div>
</div>
</transition>
<div class="wrapper" ref="wrapper">
<div class="content">
<div class="newxin" v-if="down">
<img src="~assets/images/loading.gif" />
</div>
<div v-for="(items, index) of main" :key="index">
<div class="home-box" v-for="(item, index) of items" :key="index" @click="ApplyBtn(item.id)">
<img :src="item.logo" alt="" />
<div class="home-list">
<div class="top-list">
<h5>{{item.title}}</h5>
<div class="num-tit"><i>{{item.hit}}</i>已放款</div>
</div>
<div class="top-line">
<span class="tit">额度范围(元)</span>
<span class="num">{{item.loan_limit}}</span>
</div>
<div class="center-line">
<span class="tit">贷款周期(天)</span>
<span class="num">{{item.loan_during}}</span>
</div>
<div class="right-line">
<span class="tit">参考利率</span>
<span class="num">{{item.loan_rate}}%</span>
</div>
</div>
</div>
</div>
<div class="newxin-bottom" v-if="up"></div>
</div>
</div>
<div v-show="showtit">
<p class="notit"><img src="~assets/images/61542708710.jpg" alt=""></p>
</div>
<div v-show="loading" class="loading">
<img src="~assets/images/loading.gif" alt="">
</div>
<div v-show="showloading" class="loading">
<img src="~assets/images/loading.gif" alt="">
</div>
<div class="seize"></div>
</div>
</template>
<script>
import axios from 'axios'
import BScroll from 'better-scroll'
import util from '../../../util/util'
let page = 1
export default {
name: 'BorrowMain',
data () {
return {
main: [],
list: [],
mon: [],
msg: '',
showtit: false,
ishow: false,
monshow: false,
loading: false,
sumIndex: 0,
typeIndex: 0,
sum: '',
dropDown: false,
type: '',
showloading: '',
loadingConnecting: false,
down: false,
up: true,
pulldownTip: {
text: '下拉刷新',
textup: '上拉加载更多',
rotate: ''
}
}
},
methods: {
minlist () {
axios.post(this.GLOBAL.ajaxurl + 'api/v1/product/getscreen', {
loanKey: this.route.params.loanKey,
choose: this.sum,
position: this.type
})
.then(this.sumSucc)
},
sumSucc (res) {
res = res.data
if (res.code === 200) {
this.main = [res.data.data]
this.showtit = false
}
if (JSON.stringify(res.data) === '{}') {
this.showtit = true
}
},
typeclike (data, index) {
this.typeIndex = index
this.type = data.position
this.monshow = !this.monshow
axios.post(this.GLOBAL.ajaxurl + 'api/v1/product/getList', {
loanKey: this.route.params.loanKey,
product_id: id,
client: 'wechat',
openid: sessionStorage.getItem('openid')
})
.then(this.ApplyBtnSucc)
},
ApplyBtnSucc (res) {
res = res.data
if (res.code === 200) {
window.location.href = res.data
}
},
getMainInfo () {
this.showloading = true
axios.post(this.GLOBAL.ajaxurl + 'api/v1/product/getList', {
page: page++,
loanKey: this.toast(this.msg)
},
BS () {
if (!this.refs.wrapper, {
probeType: this.probeType,
click: this.click,
scrollX: this.scrollX,
scrollY: this.scrollY
})
this.scroll.on('scroll', pos => {
this.scroll.hasVerticalScroll = true
if (pos.y > 50) {
this.down = true
} else {
this.down = false
}
})
this.scroll.on('touchEnd', pos => {
if (pos.y > 50) {
axios.post(this.GLOBAL.ajaxurl + 'api/v1/product/getList', {
page: '1',
loanKey: this.toast('刷新成功!')
this.main = [res.data.data]
}
}.bind(this))
this.down = false
}
if (this.scroll.maxScrollY > pos.y + 10) {
this.getMainInfo()
this.scroll.finishPullUp()
this.scroll.refresh()
this.route.params.loanKey)
},
watch: {
data () {
setTimeout(() => {
this.BS()
}, this.refreshDelay)
}
},
props: {
/**
* 1 滚动的时候会派发scroll事件,会截流。
* 2 滚动的时候实时派发scroll事件,不会截流。
* 3 除了实时派发scroll事件,在swipe的情况下仍然能实时派发scroll事件
/
probeType: {
type: Number,
default: 3
},
/*
* 点击列表是否派发click事件
/
click: {
type: Boolean,
default: true
},
/*
* 是否开启横向滚动
/
scrollX: {
type: Boolean,
default: false
},
scrollY: {
type: Boolean,
default: true
},
/*
* 是否派发滚动事件
/
listenScroll: {
type: Boolean,
default: true
},
/*
* 列表的数据
/
data: {
type: Array,
default: null
},
/*
* 是否派发滚动到底部的事件,用于上拉加载
/
pullup: {
type: Boolean,
default: false
},
/*
* 是否派发顶部下拉的事件,用于下拉刷新
/
pulldown: {
type: Boolean,
default: true
},
/*
* 是否派发列表滚动开始的事件
/
beforeScroll: {
type: Boolean,
default: true
},
/*
* 当数据更新后,刷新scroll的延时。
*/
refreshDelay: {
type: Number,
default: 30
}
},
beforeDestroy () {
page = 1
}
}
</script>
<style lang="stylus" scoped>
@import '~assets/styles/varibles.styl'
.main
padding-top 1.6rem
.herder
width 100%
height .9rem
background #FFFFFF
position fixed
top 0
left 0
z-index 100
div
width 50%
height .9rem
line-height .9rem
float left
text-align center
color #666666
font-size .26rem
.on
color background
.wrapper
width 100%
height 85%
position absolute
overflow hidden
top 8%
bottom 8%
.newxin
width 100%
height .5rem
img
width .4rem
height .4rem
display block
margin 0 auto
.home-box
margin 0 .25rem;
height 100%
background #ffffff url("~assets/images/flow-right.png") no-repeat 96% center
background-size .17rem .34rem
padding .3rem .4rem .3rem .2rem
overflow hidden
box-shadow:0 0.04rem 0.2rem 0 rgba(198,198,198,0.18);
border-radius 0.18rem
margin-bottom 0.3rem
img
width 1.4rem
height 1.4rem
float left
display block
margin-right .1rem
.home-list
width 4.6rem;
float left
.top-list
width 100%;
height .42rem;
margin-bottom .2rem;
h5
width 2.1rem
color #333333
font-size .32rem
height .42rem
line-height .42rem
font-weight bold
text-align left
float left
white-space nowrap
text-overflow ellipsis
overflow hidden
.num-tit
height .42rem;
line-height .42rem
font-size .24rem
color #999999
float right
text-align right
i
color color
float left
font-size .26rem
width 2.5rem
white-space nowrap
text-overflow ellipsis
overflow hidden
line-height .36rem
.center-line
width 55%
height .36rem
float left
overflow hidden
.tit
font-size .24rem
color #999999
line-height .36rem
.num
color #333333
font-size .28rem
line-height .36rem
.right-line
width 45%
height .34rem
display block
float right
text-align right
.tit
font-size .24rem
color #999999
line-height .34rem
.num
color #333333
font-size .26rem
line-height .34rem
.newxin
width 100%
height .5rem
text-align center
line-height .5rem
.newxin-bottom
width 100%
height .5rem
position absolute
bottom -1rem
text-align center
.seize
width 100%
height 1.25rem
.notit
text-align center
font-size .36rem
margin-top 1rem
img
width 4rem
.loading
position fixed
top 0
right 0
bottom 0
left 0
z-index 998
img
position absolute
left 50%
top 50%
width .8rem
height .8rem
transform translate(-50%, -50%)
.loading
position fixed
top 0
right 0
bottom 0
left 0
z-index 998
img
width .8rem
height .8rem
position absolute
left 50%
top 50%
transform translate(-50%, -50%)
.v-enter, .v-leave-to
opacity 0
.v-enter-active, .v-leave-active
transition opacity .2s
</style>