微信小程序如何實現商品分類列表

這篇文章主要講解了“微信小程序如何實現商品分類列表”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序如何實現商品分類列表”吧！

一、效果展示

二、代碼實現

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

感謝各位的閱讀，以上就是“微信小程序如何實現商品分類列表”的內容了，經過本文的學習后，相信大家對微信小程序如何實現商品分類列表這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！