最近再做一个商城类型的小程序，先来捋一捋需求：
分类一级页面
首先进入分类页面显示的是这个一级页面，然后点击任意的分类，会跳转到二级页面，并显示当前选择分类的商品，例如我们这里选择的休闲零食这个分类，显示效果应该如下：
分类页面的二级页面
先上代码：
wxml：
<view class="container">
<!-- 使用wx:if控制一级二级页面的显示隐藏 -->
<view class='menu_one' wx:if="{{oneIsShow}}">
<!-- 导航栏 -->
<view class='search'>
<view class='search_box'>
<image class='icon_search' src='../../images/search.png'></image>
<input class='ipt_search' placeholder='搜索'></input>
</view>
</view>
<!-- 分类菜单一级页面布局 -->
<view class='menu_box'>
<view class='title'>
<text class='menu_box_title'>所有分类</text>
</view>
<view class='menu_box_list'>
<block wx:key="key{{item_index}}" wx:for="{{sorting_menus}}">
<!-- 使用三元运算符设置每行第一个元素的位置 -->
<!-- 定义data-id接受每个菜单栏的id，此id与二级页面中的下标和id保持一致，data-name获取菜单名称用做二级页面右侧区域标题使用 -->
<view class="menu_box_item {{index%3==0?'item_right':''}}" bindtap="showRight" data-id="{{item.id}}" data-name="{{item.sorting_menu_txts}}">
<image class='menu_box_img' src='{{item.sorting_menu_imgs}}'></image>
<text class='menu_box_name'>{{item.sorting_menu_txts}}</text>
</view>
</block>
</view>
</view>
</view>
<view class='menu_two' wx:else>
<!-- 导航栏 -->
<view class='search_two'>
<view class='search_box_two'>
<input class='ipt_search_two' placeholder='搜索' placeholder-class="text_center"></input>
<image class='icon_search_two' src='../../images/search_red.png'></image>
</view>
</view>
<!-- 下面选择部分 -->
<view class='main_menu_box'>
<!-- 左侧部分 -->
<view class='menu_box_left'>
<view class='sbl'>
<block wx:key="key{{menu_index}}" wx:for="{{left_menus}}">
<!--当前项的id等于item项的id，那个就是当前状态-->
<!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开右侧页面使用-->
<view class='box_left_item {{curNav == item.id ? "active":""}}' bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}" data-name="{{item.menu_name}}">
{{item.menu_name}}
</view>
</block>
</view>
</view>
<!-- 右侧部分 -->
<view class='menu_box_right'>
<!-- 接受左侧或者一级页面传过来的菜单名称 -->
<!-- 这里我没有做有无数据的判断，有需求的话大家可以加一下 -->
<text class='menu_right_title'>{{menuRightTitle}}</text>
<block wx:key="key{{menu_right_index}}" wx:for="{{menuRightGoods}}">
<view class='menu_right_item'>
<image class='shop_img' src='{{item.shopImg}}'></image>
<image class='icon_vip' src='{{item.iconImg}}'></image>
<view class='menu_right_txt'>
<text class='menu_right_name'>{{item.name}}</text>
<view class='menu_right_lable'>{{item.discount}}</view>
<view class='menu_right_down'>
<text class='menu_right_nprice'>¥{{item.newPrice}}</text>
<text class='menu_right_oprice'>{{item.oldPrice}}</text>
<image class='menu_right_shopcar' src='../../images/02fenlei_gouwuche.png'></image>
</view>
</view>
</view>
</block>
</view>
</view>
</view>
</view>
wxss：
.search {
position: fixed;
width: 750rpx;
height: 100rpx;
background: rgba(214, 70, 60, 1);
display: flex;
align-items: center;
justify-content: center;
}
.search_box {
width: 670rpx;
height: 60rpx;
background: #fff;
border-radius: 30rpx;
display: flex;
align-items: center;
}
.icon_search {
width: 32rpx;
height: 32rpx;
padding-left: 27rpx;
}
.ipt_search {
font-size: 30rpx;
padding-left: 38rpx;
width: 500rpx;
}
/* 一级页面下方菜单显示主view */
.menu_box {
margin-top: 100rpx;
width: 750rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
width: 750rpx;
margin-top: 50rpx;
}
.menu_box_title {
margin-left: 67rpx;
color: #999;
font-size: 28rpx;
}
.menu_box_list {
margin-top: 30rpx;
width: 616rpx;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.menu_box_item {
width: 125rpx;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 50rpx;
margin-left: 120rpx;
}
.menu_box_img {
width: 125rpx;
height: 125rpx;
padding-bottom: 20rpx;
}
.menu_box_name {
color: #333;
font-size: 24rpx;
}
.item_right {
margin-left: 0rpx;
}
.menu_two{
width: 100%;
min-height: 100%;
}
.search_two {
position: fixed;
width: 750rpx;
height: 100rpx;
background: rgba(214, 70, 60, 1);
display: flex;
align-items: center;
z-index: 9999;
}
.search_box_two {
width: 560rpx;
height: 60rpx;
background: #fff;
border-radius: 30rpx;
display: flex;
align-items: center;
margin-left: 40rpx;
}
.icon_search_two {
width: 32rpx;
height: 32rpx;
padding-right: 33rpx;
}
.text_center{
text-align: center;
color: #D6463C;
}
.ipt_search_two {
font-size: 30rpx;
padding-left: 38rpx;
width: 500rpx;
}
.main_menu_box{
display: flex;
height: 100%;
overflow: hidden;
margin-top: 100rpx;
}
/* 二级页面左侧菜单栏 */
.menu_box_left{
/* 设置fixed定位，固定左边，不会随着页面滚动而滚动 */
position: fixed;
width: 180rpx;
height: 100%;
display: flex;
flex-direction: column;
background:rgba(249,249,249,1);
}
.sbl{
/* 左侧主view设置fixed后，当左侧栏超出屏幕高度后无法滑动，所以设置一个子view来解决，给子view设置相对定位 */
position: absolute;
height: 100%;
overflow: auto;
}
.box_left_item{
width: 180rpx;
height: 80rpx;
font-size: 28rpx;
text-align: center;
line-height: 84rpx;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(102,102,102,1);
display: block;
}
.active{
width: 180rpx;
height: 80rpx;
background:rgba(255,255,255,1);
font-weight:900;
color:rgba(51,51,51,1);
}
.active:before{
width:r5px;
height:50rpx;
content: "|";
font-weight: 900;
color: rgba(214,70,60,1);
float: left;
font-size: 50rpx;
margin-left: 0;
padding-left: 0;
}
.menu_box_right{
position: absolute;
width: 100%;
left: 180rpx;
}
.menu_right_title{
margin-left: 15rpx;
margin-top: 15rpx;
padding-bottom: 12rpx;
font-size:24rpx;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(51,51,51,1);
}
.menu_right_item{
margin-left: 15rpx;
width: 100%;
height: 225rpx;
border-bottom: 1rpx solid #D8D8D8;
display: flex;
}
.shop_img{
width: 200rpx;
height: 200rpx;
padding: 15rpx;
}
.icon_vip{
position: absolute;
width: 38rpx;
height: 30rpx;
margin: 15rpx 0 0 15rpx;
}
.menu_right_txt{
width: 310rpx;
height: 200rpx;
padding-top: 15rpx;
line-height:30rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.menu_right_name{
font-size:28rpx;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(51,51,51,1);
}
.menu_right_lable{
width: 50rpx;
height: 50rpx;
background:rgba(214,70,60,1);
border-radius: 25rpx;
font-size:20rpx;
color:rgba(255,255,255,1);
text-align: center;
line-height: 50rpx;
}
.menu_right_down{
display: flex;
align-items: center;
justify-content: space-between;
line-height:42rpx;
}
.menu_right_nprice{
font-size:30rpx;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(214,70,60,1);
}
.menu_right_oprice{
font-size:20rpx;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(185,189,185,1);
text-decoration:line-through;
}
.menu_right_shopcar{
width: 38rpx;
height: 38rpx;
float: right;
}
js：
// pages/menu/menu.js
Page({
/**
* 页面的初始数据
*/
data: {
menuRightGoods: [{
shopImg: "../../images/02fenlei_pic1.jpg",
iconImg: "../../images/vip.png",
name: "新鲜圣女果小番茄包邮批 发时令应季摘果小西红柿",
discount: "8.0折",
newPrice: "23.9",
oldPrice: "29.8",
},
{
shopImg: "../../images/01home_pic3.jpg",
iconImg: "../../images/vip.png",
name: "车厘子超级无敌特别好吃 车厘子 250g/盒",
discount: "7折",
newPrice: "19.9",
oldPrice: "29.9",
},
{
shopImg: "../../images/01home_pic4.jpg",
iconImg: "../../images/vip.png",
name: "海南香蕉1kg 新鲜水果 海南 水果 热带水果",
discount: "6.7折",
newPrice: "14.9",
oldPrice: "20.8",
},
{
shopImg: "../../images/01home_pic5.jpg",
iconImg: "../../images/vip.png",
name: "光明莫斯利安常温酸奶 200g*6盒*4组",
discount: "8.9折",
newPrice: "61.9",
oldPrice: "69.9",
},
{
shopImg: "../../images/02fenlei_pic1.jpg",
iconImg: "../../images/vip.png",
name: "新鲜圣女果小番茄包邮批 发时令应季摘果小西红柿",
discount: "8.0折",
newPrice: "23.9",
oldPrice: "29.8",
}
],
menuRightTitle: "所有商品",
index: 1,
curNav: 0,
left_menus: [{
menu_name: "所有商品",
id: 0
},
{
menu_name: "限时抢购",
id: 1
},
{
menu_name: "时令果蔬",
id: 2
},
{
menu_name: "火锅食材",
id: 3
},
{
menu_name: "肉禽蛋品",
id: 4
},
{
menu_name: "海鲜水产",
id: 5
},
{
menu_name: "水乳饮品",
id: 6
},
{
menu_name: "面点冻品",
id: 7
},
{
menu_name: "休闲零食",
id: 8
},
{
menu_name: "粮油干货",
id: 9
},
{
menu_name: "日用百货",
id: 10
},
{
menu_name: "清洁用品",
id: 11
}
],
oneIsShow: true,
sorting_menus: [{
sorting_menu_imgs: "../../images/02fenlei_01.png",
sorting_menu_txts: "所有商品",
id:0
},
{
sorting_menu_imgs: "../../images/02fenlei_02.png",
sorting_menu_txts: "限时抢购",
id: 1
},
{
sorting_menu_imgs: "../../images/02fenlei_03.png",
sorting_menu_txts: "时令果蔬",
id: 2
},
{
sorting_menu_imgs: "../../images/02fenlei_04.png",
sorting_menu_txts: "火锅食材",
id: 3
},
{
sorting_menu_imgs: "../../images/02fenlei_05.png",
sorting_menu_txts: "肉禽蛋品",
id: 4
},
{
sorting_menu_imgs: "../../images/02fenlei_06.png",
sorting_menu_txts: "海鲜水产",
id: 5
},
{
sorting_menu_imgs: "../../images/02fenlei_07.png",
sorting_menu_txts: "水乳饮品",
id: 6
},
{
sorting_menu_imgs: "../../images/02fenlei_08.png",
sorting_menu_txts: "面点冻品",
id: 7
},
{
sorting_menu_imgs: "../../images/02fenlei_09.png",
sorting_menu_txts: "休闲零食",
id: 8
},
{
sorting_menu_imgs: "../../images/02fenlei_10.png",
sorting_menu_txts: "粮油干货",
id: 9
},
{
sorting_menu_imgs: "../../images/02fenlei_11.png",
sorting_menu_txts: "日用百货",
id: 10
},
{
sorting_menu_imgs: "../../images/02fenlei_12.png",
sorting_menu_txts: "清洁用品",
id: 11
}
],
},
//点击出现右边栏
switchRightTab: function(e) {
// 获取item项的id，和数组的下标值
let id = e.target.dataset.id,
index = parseInt(e.target.dataset.index),
shopname = e.target.dataset.name;
// 我这里数据写的是静态的，所以声明一个数组然后用switch重新赋值
var newGoods = [];
console.log(shopname);
console.log(index);
switch (index) {
case 0:
newGoods = [{
shopImg: "../../images/02fenlei_pic1.jpg",
iconImg: "../../images/vip.png",
name: "新鲜圣女果小番茄包邮批 发时令应季摘果小西红柿",
discount: "8.0折",
newPrice: "23.9",
oldPrice: "29.8",
},
{
shopImg: "../../images/01home_pic3.jpg",
iconImg: "../../images/vip.png",
name: "车厘子超级无敌特别好吃 车厘子 250g/盒",
discount: "7折",
newPrice: "19.9",
oldPrice: "29.9",
},
{
shopImg: "../../images/01home_pic4.jpg",
iconImg: "../../images/vip.png",
name: "海南香蕉1kg 新鲜水果 海南 水果 热带水果",
discount: "6.7折",
newPrice: "14.9",
oldPrice: "20.8",
},
{
shopImg: "../../images/01home_pic5.jpg",
iconImg: "../../images/vip.png",
name: "光明莫斯利安常温酸奶 200g*6盒*4组",
discount: "8.9折",
newPrice: "61.9",
oldPrice: "69.9",
},
{
shopImg: "../../images/02fenlei_pic1.jpg",
iconImg: "../../images/vip.png",
name: "新鲜圣女果小番茄包邮批 发时令应季摘果小西红柿",
discount: "8.0折",
newPrice: "23.9",
oldPrice: "29.8",
}
]
break;
case 1:
newGoods = [{
shopImg: "../../images/02fenlei_pic1.jpg",
iconImg: "../../images/vip.png",
name: "新鲜圣女果小番茄包邮批 发时令应季摘果小西红柿",
discount: "8.0折",
newPrice: "23.9",
oldPrice: "29.8",
}]
break;
case 2:
newGoods = [{
shopImg: "../../images/01home_pic3.jpg",
iconImg: "../../images/vip.png",
name: "车厘子超级无敌特别好吃 车厘子 250g/盒",
discount: "7折",
newPrice: "19.9",
oldPrice: "29.9",
}]
break;
case 3:
newGoods = [{
shopImg: "../../images/01home_pic4.jpg",
iconImg: "../../images/vip.png",
name: "海南香蕉1kg 新鲜水果 海南 水果 热带水果",
discount: "6.7折",
newPrice: "14.9",
oldPrice: "20.8",
}]
break;
case 4:
newGoods = [{
shopImg: "../../images/01home_pic5.jpg",
iconImg: "../../images/vip.png",
name: "光明莫斯利安常温酸奶 200g*6盒*4组",
discount: "8.9折",
newPrice: "61.9",
oldPrice: "69.9",
}]
break;
case 5:
newGoods = [{
shopImg: "../../images/02fenlei_pic1.jpg",
iconImg: "../../images/vip.png",
name: "新鲜圣女果小番茄包邮批 发时令应季摘果小西红柿",
discount: "8.0折",
newPrice: "23.9",
oldPrice: "29.8",
}]
break;
case 6:
newGoods = [{
shopImg: "../../images/01home_pic4.jpg",
iconImg: "../../images/vip.png",
name: "海南香蕉1kg 新鲜水果 海南 水果 热带水果",
discount: "6.7折",
newPrice: "14.9",
oldPrice: "20.8",
}]
break;
case 7:
newGoods = [{
shopImg: "../../images/01home_pic3.jpg",
iconImg: "../../images/vip.png",
name: "车厘子超级无敌特别好吃 车厘子 250g/盒",
discount: "7折",
newPrice: "19.9",
oldPrice: "29.9",
}]
break;
case 8:
newGoods = [{
shopImg: "../../images/01home_pic5.jpg",
iconImg: "../../images/vip.png",
name: "光明莫斯利安常温酸奶 200g*6盒*4组",
discount: "8.9折",
newPrice: "61.9",
oldPrice: "69.9",
}]
break;
case 9:
newGoods = [{
shopImg: "../../images/02fenlei_pic1.jpg",
iconImg: "../../images/vip.png",
name: "新鲜圣女果小番茄包邮批 发时令应季摘果小西红柿",
discount: "8.0折",
newPrice: "23.9",
oldPrice: "29.8",
}]
break;
case 10:
newGoods = [{
shopImg: "../../images/01home_pic3.jpg",
iconImg: "../../images/vip.png",
name: "车厘子超级无敌特别好吃 车厘子 250g/盒",
discount: "7折",
newPrice: "19.9",
oldPrice: "29.9",
}]
break;
case 11:
newGoods = [{
shopImg: "../../images/01home_pic4.jpg",
iconImg: "../../images/vip.png",
name: "海南香蕉1kg 新鲜水果 海南 水果 热带水果",
discount: "6.7折",
newPrice: "14.9",
oldPrice: "20.8",
}]
break;
}
// 把点击到的某一项，设为当前index
this.setData({
curNav: id,//设置当前点击项
curIndex: index,//更改当前点击项下标为当前数组下标
menuRightTitle: shopname,//设置右侧显示栏标题
menuRightGoods: newGoods//设置需要展示的商品
})
},
// 分类首页跳转二级页面
showRight:function(e){
let chooseId = e.currentTarget.dataset.id,
shopname = e.currentTarget.dataset.name;;
console.log(shopname);
let newGoods = [];
switch (chooseId) {
case 0:
newGoods = [{
shopImg: "../../images/02fenlei_pic1.jpg",
iconImg: "../../images/vip.png",
name: "新鲜圣女果小番茄包邮批 发时令应季摘果小西红柿",
discount: "8.0折",
newPrice: "23.9",
oldPrice: "29.8",
},
{
shopImg: "../../images/01home_pic3.jpg",
iconImg: "../../images/vip.png",
name: "车厘子超级无敌特别好吃 车厘子 250g/盒",
discount: "7折",
newPrice: "19.9",
oldPrice: "29.9",
},
{
shopImg: "../../images/01home_pic4.jpg",
iconImg: "../../images/vip.png",
name: "海南香蕉1kg 新鲜水果 海南 水果 热带水果",
discount: "6.7折",
newPrice: "14.9",
oldPrice: "20.8",
},
{
shopImg: "../../images/01home_pic5.jpg",
iconImg: "../../images/vip.png",
name: "光明莫斯利安常温酸奶 200g*6盒*4组",
discount: "8.9折",
newPrice: "61.9",
oldPrice: "69.9",
},
{
shopImg: "../../images/02fenlei_pic1.jpg",
iconImg: "../../images/vip.png",
name: "新鲜圣女果小番茄包邮批 发时令应季摘果小西红柿",
discount: "8.0折",
newPrice: "23.9",
oldPrice: "29.8",
}
]
break;
case 1:
newGoods = [{
shopImg: "../../images/02fenlei_pic1.jpg",
iconImg: "../../images/vip.png",
name: "新鲜圣女果小番茄包邮批 发时令应季摘果小西红柿",
discount: "8.0折",
newPrice: "23.9",
oldPrice: "29.8",
}]
break;
case 2:
newGoods = [{
shopImg: "../../images/01home_pic3.jpg",
iconImg: "../../images/vip.png",
name: "车厘子超级无敌特别好吃 车厘子 250g/盒",
discount: "7折",
newPrice: "19.9",
oldPrice: "29.9",
}]
break;
case 3:
newGoods = [{
shopImg: "../../images/01home_pic4.jpg",
iconImg: "../../images/vip.png",
name: "海南香蕉1kg 新鲜水果 海南 水果 热带水果",
discount: "6.7折",
newPrice: "14.9",
oldPrice: "20.8",
}]
break;
case 4:
newGoods = [{
shopImg: "../../images/01home_pic5.jpg",
iconImg: "../../images/vip.png",
name: "光明莫斯利安常温酸奶 200g*6盒*4组",
discount: "8.9折",
newPrice: "61.9",
oldPrice: "69.9",
}]
break;
case 5:
newGoods = [{
shopImg: "../../images/02fenlei_pic1.jpg",
iconImg: "../../images/vip.png",
name: "新鲜圣女果小番茄包邮批 发时令应季摘果小西红柿",
discount: "8.0折",
newPrice: "23.9",
oldPrice: "29.8",
}]
break;
case 6:
newGoods = [{
shopImg: "../../images/01home_pic4.jpg",
iconImg: "../../images/vip.png",
name: "海南香蕉1kg 新鲜水果 海南 水果 热带水果",
discount: "6.7折",
newPrice: "14.9",
oldPrice: "20.8",
}]
break;
case 7:
newGoods = [{
shopImg: "../../images/01home_pic3.jpg",
iconImg: "../../images/vip.png",
name: "车厘子超级无敌特别好吃 车厘子 250g/盒",
discount: "7折",
newPrice: "19.9",
oldPrice: "29.9",
}]
break;
case 8:
newGoods = [{
shopImg: "../../images/01home_pic5.jpg",
iconImg: "../../images/vip.png",
name: "光明莫斯利安常温酸奶 200g*6盒*4组",
discount: "8.9折",
newPrice: "61.9",
oldPrice: "69.9",
}]
break;
case 9:
newGoods = [{
shopImg: "../../images/02fenlei_pic1.jpg",
iconImg: "../../images/vip.png",
name: "新鲜圣女果小番茄包邮批 发时令应季摘果小西红柿",
discount: "8.0折",
newPrice: "23.9",
oldPrice: "29.8",
}]
break;
case 10:
newGoods = [{
shopImg: "../../images/01home_pic3.jpg",
iconImg: "../../images/vip.png",
name: "车厘子超级无敌特别好吃 车厘子 250g/盒",
discount: "7折",
newPrice: "19.9",
oldPrice: "29.9",
}]
break;
case 11:
newGoods = [{
shopImg: "../../images/01home_pic4.jpg",
iconImg: "../../images/vip.png",
name: "海南香蕉1kg 新鲜水果 海南 水果 热带水果",
discount: "6.7折",
newPrice: "14.9",
oldPrice: "20.8",
}]
break;
}
this.setData({
curNav : chooseId,
oneIsShow : false,//显示二级页面
menuRightGoods:newGoods,
menuRightTitle: shopname,
});
}
})
这样就可以实现需求了
