利用Vue和mint-ui单页面开发时,遇到“上拉加载,下拉刷新”的功能,使用的mint-ui组件为loadmore组件,遇到了下拉不能加载的的问题,分享解决办法,有待改善,往大神们提意见·······
HTML 代码如下:
<div class="re_content">
<mt-loadmore :top-method="loadTop" @top-status-change="handleTopChange" :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" ref="loadmore">
<div>
你要循环显示的内容
</div>
</mt-loadmore>
</div>
同时,注意容器css的设置,这个很重要!!!!还有对于容器的高度可以设置固定值,也可以让根据内容的大小来变化。
overflow: scroll;
接下来就是methods的处理了:(这里还有上拉,下拉的距离为多长会触发方法,可以去mint-ui官网查看api,进行设置)
data(){
return {
// 可以进行上拉
allLoaded: false,
bottomStatus: '',
topStatus: ''
}
},
methods:{
// 下拉状态改变时,
handleBottomChange (status) {
this.bottomStatus = status
},
// 上拉状态改变时
handleTopChange (status) {
this.topStatus = status
console.log('this.topStatus==' + this.topStatus)
},
// 下拉刷新,触发的方法
loadTop () {
// 重新加载,getData方法自己定义,用于获取数据
this.getData()
this.$refs.loadmore.onTopLoaded()
},
// 上拉加载,触发的方法
loadBottom () {
// 如果数据为加载完
if (!this.allLoaded) {
//如果数据加载完,修改allLoaded状态
if (value.data.data.content.length < 4) {
this.allLoaded = true // 若数据已全部获取完毕
}
} else {
this.$refs.loadmore.onBottomLoaded()
this.$toast({
message: '没有更多啦~',
position: 'bottom',
duration: 3000
})
}
}
}
我在这里在判断是否可以继续上拉加载的方法是,判断接口返回的数据长度是否小于每次请求的长度,如果小于每次请求的长度,则说明,数据已经全部加载,反之,没有加载完全,并给用户提示。
但是,感觉这种方法比较笨拙,还望各路大神提提意见~~~