uniapp 电商app 商品列表子组件中实现上拉加载更多功能

╰半夏微凉° 2021-07-25 23:22 850阅读 0赞

# 之前的上拉加载更多是通过父组件进行实现的 #

#### 监听 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();
    	}
    }

父组件处理触底事件的思路：

1.  定义一个`pageNo`，初始值为0；
2.  `scrollBottom`可以是在`data`中定义，也可以是在`props`中定义，看是否有其父组件传值
3.  在`warch`中监听`scrollBottom`的变化，如果触底则执行`setReachBottom`方法
4.  在`setReachBottom`方法中，执行页数增加和列表数据加载功能。

# 在子组件中实现页码的增加并加载更多数据 #

父组件的处理方法：  
处理思路：

1.  定义一个`loadDataEventCount`属性，初始值为0；
2.  监听`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>

子组件的处理方式：  
子组件的处理思路：

1.  子组件通过`props`接收父组件传递过来的`loadDataEventCount`属性
2.  子组件监听`watch`这个属性`loadDataEventCount`，然后执行`setReachBottom`函数
3.  执行`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();
    	},
    }