uni-app商城（七）商品列表上拉触底，节流阀，下拉刷新

1.在pages.json 配置文件，为分包goodslist页面配置上拉触底距离

{
	 //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	"pages": [],
	"subPackages": [{
		"root": "subpkg",
		"pages": [
		...
		{
			"path": "goods_list/goods_list",
			"style": {
				"navigationBarTitleText": "商品列表",
				"enablePullDownRefresh": false,
				"onReachBottomDistance": 150
			}
		}, {
			"path": "search/search",
			"style": {
				"navigationBarTitleText": "搜索",
				"enablePullDownRefresh": false
			}
		}]
	}]
	...
}

2.goodslist页面中声明onReachBottom事件处理函数监听上拉触底,下拉刷新

onReachBottom() {
	//判断数据是否还有下一页数据
	if(this.queryObj.pageNum*this.queryObj.pageSize>=this.total)return uni.$showMsg('没有更多数据了');
	//判断节流阀
	if (this.isLoading) return;
	//让页码值自增+1
	this.queryObj.pageNum += 1
	//重新获取列表数据
	this.getGoodsList()
},
//下拉刷新
onPullDownRefresh() {
	//重置数据
	this.queryObj.pageNum=1;
	this.total=0;
	this.isLoading=false;
	this.goodsList=[];
	//重新发起请求
	this.getGoodsList(()=>uni.stopPullDownRefresh())
}

3.当列表数据请求成功之后，进行新旧数据的拼接处理

methods: {
	getGoodsList(cb) {
		//打开节流阀
		this.isLoading = true;
		uni.request({
			url: uni.$baseUrl + '/api/Home/GetGoodsList',
			// data: this.queryObj
		}).then((res) => {
			//关闭节流阀
			this.isLoading = false;
			//数据请求完毕调用回调函数
			cb && cb();
			// console.log(res.data.data);			
			if (res.data.code != 200) return uni.$showMsg();
			// 上拉触底后，进行新旧数据的拼接处理
			this.goodsList = [...this.goodsList,...res.data.data];
			this.total = res.data.total;
		});
	}
}

效果示例