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

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

一、效果展示

---

二、代码实现

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

/* wxss */
page{
  background-color: #fff; 
}

.container {  
  display: flex;
  flex-direction: column;
  width: 100%;  
  height: 100%;  
  background-color: #fff;  
  color: #939393;  
} 

.cate {
  display: flex;
  flex-direction: row;
  height: 85vh;
}

.nav-left{
  display: inline-block;  
  width: 45%;  
  height: 85vh;  
  background: rgba(255, 255, 255, 1);  
  text-align: left;  
} 

.nav-left-item{
  display: flex;
  align-items: center;
  background: rgba(240, 242, 246, 1);
  height: 100rpx;   
  border-bottom: 1rpx solid #fdfcfc; 
}  

.L-item-active{  
  border-left: 6rpx solid rgba(255,94,9,1);
  background: rgb(255, 255, 255);
} 

.nav-left-item-txt {
  margin-left: 40rpx;
  color: rgba(51, 51, 51, 1);
  line-height: 70rpx;   
  padding: 16rpx;     
  font-size: 32rpx; 
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.L-i-txt-active {
  color: rgba(255, 94, 9, 1);
}

.nav-right {  
  display: inline-block;  
  width: 55%;  
  height: 85vh;  
  background: rgba(255, 255, 255, 1);  
  text-align: left; 
} 

.nav-right-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: rgba(255, 255, 255, 1);
  height: 100rpx;   
  border-bottom: 1rpx solid rgba(240,242,246,1);
}

.nav-right-item-txt {
  width: 300rpx;
  margin-left: 40rpx;
  color: rgba(51, 51, 51, 1);
  line-height: 70rpx;   
  padding: 16rpx;     
  font-size: 32rpx; 
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.R-i-txt-active {
  color: rgba(255, 94, 9, 1);
}

.image-select {
  width: 60rpx;
  height: 50rpx;
  margin-left: 16rpx;
  margin-right: 32rpx;
}

.item-select {
  display: flex;
}

.btn-find {
  height: 15vh;
}

.btn-big {
  background: linear-gradient(270deg, #FF5000 0%, #FF9000 100%);
  box-shadow: 0px 6px 10px 0px rgba(255, 80, 0, 0.3);
  border-radius: 26px;
  font-size: 26rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFF!important;
    width: 100%;
  text-align: center;
  height: 88rpx;
  font-size: 36rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 44rpx auto;
}