6 | 小程序实战之商品列表（搜索框 + tabs组件 + 启用上拉页面功能加载下一页 + 启用下拉刷新 + 添加全局的正在加载图标）_微信小程序 tabs 标签 加载 刷新

1. 效果

2. 获取商品列表的数据接口

https://api-hmugo-web.itheima.net/api/public/v1/goods/search
1

3. 获取分类id

因为需要在分类页面的商品种类中点击一个种类，就会跳转到对应商品种类的商品列表，固然，需要在分类页面中的配置 url 并含有传递的参数，才能返回对应的商品列表。以下是需要传递的参数，这里先暂时传递分类id（cid）

修改分类页面的index.wxml

<view class="goods_list">
          <navigator
           wx:for="{{item1.children}}"
           wx:for-item="item2"
           wx:for-index="index2"
           wx:key="cat_id"
           url="/pages/goods_list/index?cid={{item2.cat_id}}"
          >
            <image mode="widthFix" src="{{item2.cat_icon}}" />
            <view class="goods_name">{{item2.cat_name}}</view>
          </navigator>
</view>
1
2
3
4
5
6
7
8
9
10
11
12

然后，我们点击一个曲面电视，发现有页面参数传过来了 ✌
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hRWhrUaT-1597652577419)(en-resource://database/3056:1)]

另外，为了方便看效果，我们添加一个编译模式

4. 实现搜索框和tabs组件

强烈建议，你可以先去看看我之前写的自定义组件小栗子，里面讲如何做出一个tabs组件十分清晰，否则你看下面的代码会有懵懵的（因为不想再详解)