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

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

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