实现上拉加载更多

• 打开项目根目录中的 pages.json 配置文件，为 subPackages 分包中的商品  goods_list 页面配置上拉触底的距离：

		
			"subPackages": [ { "root": "subpkg", "pages": [ { "path": "goods_detail/goods_detail",
			"style": {} }, { "path": "goods_list/goods_list", "style": { "onReachBottomDistance":
			150 } }, { "path": "search/search", "style": {} } ] } ]
		
	

• 在  goods_list  页面中，和  methods  节点平级，声明  onReachBottom  事件处理函数，用来监听页面的上拉触底行为：

		
			// 触底的事件 onReachBottom() { // 让页码值自增 +1 this.queryObj.pagenum += 1 //
			重新获取列表数据 this.getGoodsList() }
		
	

•  改造  methods  中的  getGoodsList  函数，当列表数据请求成功之后，进行新旧数据的拼接处理：

		
			// 获取商品列表数据的方法 async getGoodsList() { // 发起请求 const { data: res } = await
			uni.$http.get('/api/public/v1/goods/search', this.queryObj) if (res.meta.status
			!== 200) return uni.$showMsg() // 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接 this.goodsList
			= [...this.goodsList, ...res.message.goods] this.total = res.message.total
			}
		
	

优化：

通过节流阀防止发起额外的请求 

• 在 data 中定义  isloading  节流阀如下：

		
			data() { return { // 是否正在请求数据 isloading: false } }
		
	

•  修改  getGoodsList  方法，在请求数据前后，分别打开和关闭节流阀：

		
			// 获取商品列表数据的方法 async getGoodsList() { // ** 打开节流阀 this.isloading = true
			// 发起请求 const { data: res } = await uni.$http.get('/api/public/v1/goods/search',
			this.queryObj) // ** 关闭节流阀 this.isloading = false // 省略其它代码... }
		
	

• 在  onReachBottom  触底事件处理函数中，根据节流阀的状态，来决定是否发起请求：

		
			// 触底的事件 onReachBottom() { // 判断是否正在请求其它数据，如果是，则不发起额外的请求 if (this.isloading)
			return this.queryObj.pagenum += 1 this.getGoodsList() }
		
	

 判断数据是否加载完毕

• 如果下面的公式成立，则证明没有下一页数据了：

		
			当前的页码值 * 每页显示多少条数据 >= 总数条数 pagenum * pagesize >= total
		
	

• 修改  onReachBottom  事件处理函数如下：

		
			// 触底的事件 onReachBottom() { // 判断是否还有下一页数据 if (this.queryObj.pagenum *
			this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕！')
			// 判断是否正在请求其它数据，如果是，则不发起额外的请求 if (this.isloading) return this.queryObj.pagenum
			+= 1 this.getGoodsList() }