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