微信小程序商城项目（篇5）：分类页面的实现

最新推荐文章于 2024-08-11 14:37:31 发布

HaanLen

最新推荐文章于 2024-08-11 14:37:31 发布

阅读量5.6k

点赞数

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

本文链接：https://blog.csdn.net/weixin_40119412/article/details/108438138

版权

微信小程序专栏收录该内容

16 篇文章 17 订阅

订阅专栏

效果演示

在这里插入图片描述

步骤1：从后端获取数据

    // 分类数据获取
    let promise=getRequest('https://api-hmugo-web.itheima.net/api/public/v1/categories')
    promise.then((res)=>{
      console.log(res)
      this.setData({
        classifyData:res.data.message
      })
    })

步骤2：将导航数据渲染到页面

<view class="classifyContent">
    <!-- 左边标题导航 -->
    <scroll-view  class="scrollAreaLeft" scroll-y="{{true}}" >
        <view class="titel" wx:for="{{classifyData}}" wx:key="index">
            <view class="classifySlideLeft" bindtap="showContent" data-catid="{{item.cat_id}}">{{item.cat_name}}</view>
        </view>
    </scroll-view>
    <!-- 右边相关内容显示 -->
    <scroll-view class="scrollAreaRight" scroll-y="{{true}}">
        <view class="classifySlideRight" wx:for="{{selectData.children}}" wx:key="index">
            <view >{{item.cat_name}}</view>
            <view class="sectionProduct">
                <view class="childerProduct" wx:for="{{item.children}}" wx:key="index">
                    <image mode="widthFix" class="detailPic" src="{{item.cat_icon}}" />
                    <text >{{item.cat_name}}</text>
                </view>
            </view>     
        </view>
    </scroll-view>
</view>

步骤3：点击导航标题出现相关类目

  showContent:function(e){
    console.log(e)
    let id=e.currentTarget.dataset.catid
    let arr=this.data.classifyData
    let index=0
    for(let i in arr){
      if(id==arr[i].cat_id){
        index=i
      }
    }
    this.setData({
      selectData:arr[index]
    })
  }

步骤4：点击进入产品列表

  goDetail:function(e){
    // console.log(e)
    let id=e.currentTarget.dataset.pid
    wx.navigateTo({
      url: '../../pages/goodlist/goodlist?pid='+id,
    });
  }