【前端小程序】04-商品列表页面

1. 根据 分类id 获取商品列表

1. 可以通过接口地址直接传递参数的方式：

可以通过接口地址直接传递参数的方式

2. 该参数id在跳转到的页面，页面加载的页面生命周期函数中的options参数中可以获取 options.cid。
   
   页面加载的生命周期函数中获取传递的参数

2. 自定义顶部tabs组件

1. 参考网址: 自定义顶部tabs组件。

3. 获取动态数据

1. 在data中定义一个变量用于接收商品列表数据。

2. 定义一个全局的参数对象,封装查询条件:

QueryParams: {
        query: "", // 关键词
        cid: "", // 分类id
        pagenum: 1, // 页码
        pagesize: 10 // 页容量
    },

3. 获取商品列表，使用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 用户上滑页面，滚动条触底开始加载下一页数据

1. 通过滚动条触底事件onReachBottom。

2. 判断还有没有下一页数据:

获取总页数（总页数 = 数据总条数 / 每页显示条数）。
获取当前页码。
判断一下当前页码是否大于等于总页码。

3. 假如没有下一页数据，弹出一个提示。

4. 假如还有下一页数据，发送请求加载数据。

前页码 ++
重新发送请求
数据请求回来，要对data中的数据进行拼接而不是使用全部替换!

将数组进行解构拼接

5. 在滚动条触底事件中编写逻辑:

/**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {
        if (this.QueryParams.pagenum >= this.totalPages) {
            console.log("没有数据了~~");
        } else {
            this.QueryParams.pagenum++;
            this.getGoodsList();
        }
    },

4.2 没有下一页提示显示优化

wx.showToast({
                title: '没有数据了哦~~',
                icon: 'none'
            });

1. 如果出现提示的文字较多显示不全的情况，可以将icon属性设置为none将图标去除，显示更多的文字。

wx.showToast({
                title: '',
                icon: 'none',
                image: '',
                duration: 1500,
                mask: false,
                success: (result) => {
                    
                },
                fail: () => {},
                complete: () => {}
            });

5. 下拉刷新

1. 在页面中开启下拉刷新：在页面的index.json文件中添加如下

"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"

2. 参考配置：小程序配置

5.1 触发下拉刷新事件

1. onPullDownRefresh下拉刷新事件。

5.2 重置数组

重置商品列表数据

5.3 重置页码设置为 1

重置页码为1

5.4 重新发送请求

重新发送请求

5.5 数据回来了需要手动关闭刷新等待效果

关闭刷新等待效果

6. 优化请求时显示加载图标

1. 不是在每一个请求之前加上显示加载图标的方法，在请求完成之后隐藏图标。而是在全局的请求中进行显示与隐藏加载图标。

2. 设置一个全局的变量，当发送一次请求便进行+1操作，当请求完成一次便执行一次-1操作。当全局变量为 0表示请求执行完成，之后隐藏加载图标。

优化请求时显示加载图标