【微信小程序】黑马优购--04商品列表

最新推荐文章于 2024-08-26 17:31:40 发布

西西歪歪西歪

最新推荐文章于 2024-08-26 17:31:40 发布

阅读量1.7k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_58214412/article/details/122046163

版权

本文档详细介绍了微信小程序中商品列表页面的实现过程，包括从获取分类ID、实现搜索框和tabs组件，到动态渲染商品、处理上拉加载更多和下拉刷新功能，以及全局加载中图标的效果。涉及到tabs组件的创建、数据传递、网络请求和用户体验优化等关键点。

摘要由CSDN通过智能技术生成

6.商品列表页面

接口文档

6.1效果

6.2获取分类id

在分类页面wxml中加个超链接把id传过去

 <view class="goods_list">
  <navigator wx:for="{
  {item1.children}}" wx:for-index="index2" wx:for-item="item2" wx:key="cat_id" 
url="/pages/goods_list/goods_list?cid={
  {item2.cat_id}}">

6.3实现搜索框和tabs组件

**本小节涉及tabs组件、子向父传递数据以及父向子传递数据的知识点

详情可参考基础知识篇中自定义组件的内容

首先在component文件下新建tabs组件文件，然后在goods_json中引入

{
  "usingComponents": {
    "Searchlnput":"../../components/Searchlnput/Searchlnput",
    "Tabs":"../../components/Tabs/Tabs"
  },
  "navigationBarTitleText": "商品列表"
}

在goods_wxml中使用组件，并监听自定义事件

<!--pages/goods_list/goods_list.wxml-->
<!-- 搜索框 开始 -->
<Searchlnput></Searchlnput>
<!-- 搜索框 结束 -->

<!-- 监听自定义事件 -->
<Tabs tabs="{
  {tabs}}" bindtabsItemChange="handletabsItemChange">
  <block wx:if="{
  {tabs[0].isActive}}">0</block>
  <block wx:elif="{
  {tabs[1].isActive}}">1</block>
  <block wx:elif="{
  {tabs[2].isActive}}">2</block>
</Tabs>

在tabs_wxml中写好组件的模板，同时绑定点击事件

<!--components/Tabs/Tabs.wxml-->
<view class="tabs">
  <view class="tabs_title">
    <view class="title_item {
  {item.isActive?'active':''}} " wx:for="{
  {tabs}}" wx:key="id" bindtap="handleItemTap" data-index="{
  {index}}">
      {
  {item.value}}
    </view>
  </view>
  <view class="tabs_content">
  <slot></slot>
  </view>
</view>

在tabs_wxss中写好样式

/* components/Tabs/Tabs.wxss */
.tabs_title{
  display: flex; 
}
.title_item{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 15rpx 0;
}
.active{
  color: var(--themeColor);
  border-bottom: 5rpx solid currentColor;
}

在goods_js中定义数据（data）并通过给子组件的view标签添加一个属性传递数据过去（父向子）

同时通过监听自定义事件接收子组件传过来的数据（子向父）