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

更新時間：2022年05月22日 09:00:23 作者：J1FengZ

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)商品分類列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現(xiàn)商品分類列表的具體代碼，供大家參考，具體內容如下

一、效果展示

二、代碼實現(xiàn)

<!-- 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
// 假數(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
?? ?},
?? ?
?? ?/**
?? ? * 左導航點擊事件
?? ? */
?? ?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,
?? ??? ??? ?});
?? ??? ?}?? ?
?? ?},
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: