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

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

一、效果展示

二、代码实现

<!-- 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,
            });
        }    
    },
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。