之前的上拉加载更多是通过父组件进行实现的
监听 scrollBottom 属性,如果触底则执行setReachBottom方法
data(){
return{
pageNo:0
}
},
props: {
scrollBottom: {
type: Number,
default: 0
}
},
watch: {
scrollBottom() {
if(this.scrollBottom != 0) {
//通知他妈的触底了
this.setReachBottom();
}
}
},
methods: {
//触底了
setReachBottom() {
//触底后页数增加
this.page ++;
//通过以下这个函数调用更多的数据
this.getMessage();
}
}
父组件处理触底事件的思路:
- 定义一个
pageNo
,初始值为0; scrollBottom
可以是在data
中定义,也可以是在props
中定义,看是否有其父组件传值- 在
warch
中监听scrollBottom
的变化,如果触底则执行setReachBottom
方法 - 在
setReachBottom
方法中,执行页数增加和列表数据加载功能。
在子组件中实现页码的增加并加载更多数据
父组件的处理方法:
处理思路:
- 定义一个
loadDataEventCount
属性,初始值为0; - 监听
onReachBottom
函数,如果页面触底则给loadDataEventCount
属性赋值。此处赋值是通过获取当前时间的方式,为了保证loadDataEventCount
的唯一性。
<template>
<view>
<mySwiper />
//重点是下面的这行代码,商品列表子组件
<goodsList :loadDataEventCount="loadDataEventCount" :cate="cate" :showTitle='false'/>
</view>
</template>
<script>
import mySwiper from '@/components/advert/my/swiper.vue'
import goodsList from '@/components/zaiui-common/list/goods-list';
export default {
components: {
mySwiper,goodsList
},
data() {
return {
loadDataEventCount:0,
cateObj:{},
cate:null
}
},
onLoad(option) {
this.cateObj = JSON.parse(decodeURIComponent(option.cateObj));
this.cate = Number(this.cateObj.platformCateId);
uni.setNavigationBarTitle({
title: this.cateObj.cateName
});
},
onReady() {
uni.pageScrollTo({
scrollTop: 0,
duration: 0
});
},
onReachBottom:function(){
this.loadDataEventCount = new Date().getTime()
}
}
</script>
子组件的处理方式:
子组件的处理思路:
- 子组件通过
props
接收父组件传递过来的loadDataEventCount
属性 - 子组件监听
watch
这个属性loadDataEventCount
,然后执行setReachBottom
函数 - 执行
setReachBottom
函数时,执行页码增加及数据加载功能
props: {
loadDataEventCount:{
type:Number,
default:0
}
},
watch: {
loadDataEventCount() {
this.setReachBottom();
}
},
data(){
return{
goodsData:[],
pageNo:0,
isLoad:false
}
},
methods: {
getGoodsData(){
this.isLoad = false
requestTaokeList(this.cate,this.pageNo).then(res=>{
if(res.resultList && res.resultList.length>0){
this.goodsData = this.goodsData.concat(res.resultList)
}else{
this.isLoad = true
}
}).catch(res =>{
this.isLoad = true
})
},
//触底了
setReachBottom() {
this.pageNo++;
this.getGoodsData();
},
}