在页面中使用v-infinite-scroll做上拉加载,首次进入该页面下拉不能加载,再次刷新改页面就可以,请问这种情况要如何解决?
<wv-group title="" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50" style="padding:0">
<ul>
<li v-for="(item,index) in boxdata" :key="item.index">
.....内容.........
</li>
</ul>
</wv-group>
export default{
data(){
return{
loading:false,
last:false,
boxdata:[],
pageNum:0,
bottommain: false
}
},
mounted:function(){
var _this = this;
_this.sub = function(){
var url = url
var dataJson = {)
_this.$fetch(url,dataJson)
.then((res) => {
_this.loading = false;
if (res.data.content.length > 0) {
for (let i = 0; i < res.data.content.length; i++) {
_this.boxdata.push(res.data.content[i]);
}
} else {
_this.bottommain = true
}
_this.last = res.data.last
})
}
_this.sub()
},
methods:{
loadMore () {
let _this = this;
if (_this.last == false) {
if (_this.boxdata.length > 0) {
this.loading = true;
setTimeout(() => {
_this.pageNum = _this.pageNum + 1;
_this.sub()
}, 300)
}
} else {
this.loading = false;
if (_this.boxdata.length > 0) {
_this.bottommain = true
}
}
},
}
}
首次进入调用一下loadMore()