微信小程序如何實(shí)現(xiàn)商品分類列表

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

一、效果展示

二、代碼實(shí)現(xiàn)

<!-- wxml -->
<view class="container">
<!-- 商品列表 -->
    <view class="cate">
        <!-- 左側(cè)導(dǎo)航 -->
        <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>
        <!-- 右側(cè)導(dǎo)航 -->
        <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
// 假數(shù)據(jù)
let List = [
    {
        "LeftId": 1,
        "LeftName": "分類1",
        "RightList": [
        {
            "RightId": 11,
            "RightName": "商品11"
        },
        ]
    },
    {
        "LeftId": 2,
        "LeftName": "分類2",
        "RightList": [
        {
            "RightId": 21,
            "RightName": "商品21"
        },
        ]
    },
]

Page({
    /**    
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        List : List,
        selectLeftId : null,
        selectRightId : null,
        currentIndex_L : null,
        currentIndex_R : null,
        scrollTop : 0
    },
    
    /**
     * 左導(dǎo)航點(diǎn)擊事件
     */
    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,
        }) 
    },

    /**
     * 右導(dǎo)航點(diǎn)擊事件
     */
    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,
        }) 
    },

    /**
     * 底部查看詳情按鈕點(diǎn)擊事件
     */
    toDetail(e) {
        var selectLeftId = this.data.selectLeftId;
        var selectRightId = this.data.selectRightId;

        if(selectLeftId === null){
            wx.showToast({
                title: '請(qǐng)選擇一種分類或商品！',
                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,
            });
        }    
    },
})

感謝各位的閱讀，以上就是“微信小程序如何實(shí)現(xiàn)商品分類列表”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)微信小程序如何實(shí)現(xiàn)商品分類列表這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！