这里使用scroll-view组件实现这个功能,主要思路是事先设置好pageNum、pageSize的值,当上拉到底部时触发 onScrollLower方法需要将pageNum的值加1,调用查询接口并把接口新查出来的数据加到article文章列表数据集中
<scroll-view @scrolltolower="onScrollLower" :style="{height:scrollHeight+'vh'}" :scroll-top="0" scroll-y="true" class="scroll-Y" >
<view @click="detail(item)" v-for="(item, index) in article">
文章内容
</view>
</scroll-view>
onScrollLower为触底触发加载数据的方法、scrollHeight为滚动区域的高度,这里使用vh做单位,httpHelper是我这边封装的接口调用方法,需要自己封装接口调用方法
export default {
data() {
return {
scrollHeight: 73,//滚动区域高度
article:[],
pageNum: 1,
pageSize: 5
}
},
created() {
this.list()
},
methods: {
onScrollLower() {
this.pageNum = this.pageNum + 1
this.list()
},
list() {
let paramp = {
'pageNum': this.pageNum,
'pageSize' : this.pageSize
}
// 初始化towerSwiper 传已有的数组名即可
httpHelper({
url:'examp.com/api',//参考接口地址,需要改成你自己的
data: paramp,
method: 'POST',
}).then(resp => {
let res = resp.data
if (resp.code === 0) {
this.article.push(...res)
}
}).catch(err => {
})
}
}
}