_微信小程序 tabs 标签 ">
当前位置:   article > 正文

6 | 小程序实战之商品列表(搜索框 + tabs组件 + 启用上拉页面功能加载下一页 + 启用下拉刷新 + 添加全局的正在加载图标)_微信小程序 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组件十分清晰,否则你看下面的代码会有懵懵的(因为不想再详解)

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Monodyee/article/detail/247330?site
推荐阅读
相关标签