微信小程序实现商品分类列表

本文实例为大家分享了微信小程序实现商品分类列表的具体代码，供大家参考，具体内容如下

一、效果展示

二、代码实现

<!-- wxml -->
<view class="container">
<!-- 商品列表 -->
 <view class="cate">
  <!-- 左侧导航 -->
  <scroll-view scroll-y class="nav-left">
   <view
    wx:for="{{List}}"
    wx:key="this"
    class="nav-left-item {{currentIndex_L == index  'L-item-active' : ''}}"
    bindtap="bindleLeftItemTap"
    data-index="{{index}}" >
    <text class="nav-left-item-txt {{currentIndex_L == index  'L-i-txt-active' : ''}}">{{item.LeftName}}</text>
   </view>
  </scroll-view>
  <!-- 右侧导航 -->
  <scroll-view scroll-y scroll-top="{{scrollTop}}" class="nav-right">
   <view
    wx:for="{{List[currentIndex_L].RightList}}"
    wx:key="this"
    class="nav-right-item"
    bindtap="bindleRightItemTap"
    data-index="{{index}}">
    <text class="nav-right-item-txt {{currentIndex_R == index  'R-i-txt-active' : ''}}">{{item.RightName}}</text>
    <view class="{{currentIndex_R == index  'image-select' : ''}}">
     <image wx:if="{{currentIndex_R == index}}" class="item-select" src="../icon/Hook_icon.png"/>
    </view>
   </view>
  </scroll-view>
 </view>
 <view class="pd32 btn-find">
  <view bindtap="toDetail">
   <view class="btn-big">查看详情</view>
  </view>
 </view>
</view>

// js
// 假数据
let List = [
 {
  "LeftId": 1,
  "LeftName": "分类1",
  "RightList": [
  {
   "RightId": 11,
   "RightName": "商品11"
  },
  ]
 },
 {
  "LeftId": 2,
  "LeftName": "分类2",
  "RightList": [
  {
   "RightId": 21,
   "RightName": "商品21"
  },
  ]
 },
]

Page({
 /** 
  * 页面的初始数据
  */
 data: {
  List : List,
  selectLeftId : null,
  selectRightId : null,
  currentIndex_L : null,
  currentIndex_R : null,
  scrollTop : 0
 },
 
 /**
  * 左导航点击事件
  */
 bindleLeftItemTap(e) {
  const {index} = e.currentTarget.dataset;
  this.setData({
   currentIndex_L:index,
   currentIndex_R : null,
   selectLeftId : this.data.List[index].LeftId,
   selectRightId : null,
   scrollTop : 0,
  })
 },

 /**
  * 右导航点击事件
  */
 bindleRightItemTap(e) {
  const {index} = e.currentTarget.dataset;
  let index_L = this.data.currentIndex_L;
  this.setData({
   currentIndex_R : index,
   selectRightId : this.data.List[index_L].RightList[index].RightId,
  })
 },

 /**
  * 底部查看详情按钮点击事件
  */
 toDetail(e) {
  var selectLeftId = this.data.selectLeftId;
  var selectRightId = this.data.selectRightId;

  if(selectLeftId === null){
   wx.showToast({
    title: '请选择一种分类或商品！',
    icon: 'none',
    duration: 1500,
    mask: true
   });
   return;
  }
  if(selectRightId != null) {
   wx.navigateTo({
    url: '/pages/Detail/Detail' + '' +
    'selectLeftId=' + selectLeftId +
    '&selectRightId=' + selectRightId,
    });
   }
   else {
    wx.navigateTo({
    url: '/pages/Detail/Detail' + '' +
    '&selectLeftId=' + selectLeftId,
   });
  } 
 },
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。