1. 根据 分类id 获取商品列表
- 可以通过接口地址直接传递参数的方式：
可以通过接口地址直接传递参数的方式
- 该参数
id在跳转到的页面，页面加载的页面生命周期函数中的options参数中可以获取options.cid。
页面加载的生命周期函数中获取传递的参数
2. 自定义顶部tabs组件
- 参考网址: 自定义顶部
tabs组件。
3. 获取动态数据
在data中定义一个变量用于接收商品列表数据。
定义一个全局的参数对象,封装查询条件:
QueryParams: {
query: "", // 关键词
cid: "", // 分类id
pagenum: 1, // 页码
pagesize: 10 // 页容量
},
- 获取商品列表，使用ES7的语法：
/**
* 获取商品列表
*/
async getGoodsList() {
const result = await request({ url: "/goods/search", data: this.QueryParams });
const goodsList = result.data.message.goods;
console.log(goodsList);
this.setData({
goodsList
});
}
4. 上滑触底加载新的一页
4.1 用户上滑页面，滚动条触底开始加载下一页数据
通过滚动条触底事件
onReachBottom。判断还有没有下一页数据:
获取总页数（总页数 = 数据总条数 / 每页显示条数）。
获取当前页码。
判断一下当前页码是否大于等于总页码。
假如没有下一页数据，弹出一个提示。
假如还有下一页数据，发送请求加载数据。
前页码 ++
重新发送请求
数据请求回来，要对data中的数据进行拼接而不是使用全部替换!
将数组进行解构拼接
- 在滚动条触底事件中编写逻辑:
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
if (this.QueryParams.pagenum >= this.totalPages) {
console.log("没有数据了~~");
} else {
this.QueryParams.pagenum++;
this.getGoodsList();
}
},
4.2 没有下一页提示显示优化
wx.showToast({
title: '没有数据了哦~~',
icon: 'none'
});
- 如果出现提示的文字较多显示不全的情况，可以将
icon属性设置为none将图标去除，显示更多的文字。
wx.showToast({
title: '',
icon: 'none',
image: '',
duration: 1500,
mask: false,
success: (result) => {
},
fail: () => {},
complete: () => {}
});
5. 下拉刷新
- 在页面中开启下拉刷新：在页面的
index.json文件中添加如下
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"
- 参考配置：小程序配置
5.1 触发下拉刷新事件
-
onPullDownRefresh下拉刷新事件。
5.2 重置数组
重置商品列表数据
5.3 重置页码设置为 1
重置页码为1
5.4 重新发送请求
重新发送请求
5.5 数据回来了需要手动关闭刷新等待效果
关闭刷新等待效果
6. 优化请求时显示加载图标
不是在每一个请求之前加上显示加载图标的方法，在请求完成之后隐藏图标。而是在全局的请求中进行显示与隐藏加载图标。
设置一个全局的变量，当发送一次请求便进行
+1操作，当请求完成一次便执行一次-1操作。当全局变量为0表示请求执行完成，之后隐藏加载图标。
优化请求时显示加载图标
