请大家看一下 添加什么才可以实现左侧点,右侧也切换
问题相关代码,请勿粘贴截图
```xml
这是js文件内容
Page({
/**
* 页面的初始数据
*/
data: {
// /* 左侧商品分类名称 */
// leftBar_name: [
// // { name: "💥热销💥" },
// // { name: "💎新品💎" },
// { name: "牛奶粉" },
// { name: "羊奶粉" },
// { name: "特殊奶粉" },
// { name: "营养辅食" },
// { name: "营养品" },
// { name: "男童服饰" },
// { name: "女童服饰" },
// { name: "益智玩具" },
// { name: "宝宝用品" },
// { name: "妈妈用品" },
// { name: "家庭用品" },
// ],
/* 右侧商品分类名称和图标 */
right_content: [{
title: "羊奶粉",
children: [
{
min_name: "可瑞康",
src: "https://s4.ax1x.com/2022/01/13/7lDKA0.png"
},
{
min_name: "跃贝儿",
src: "https://s4.ax1x.com/2022/01/13/7lDKA0.png"
},
{
min_name: "Oli",
src: "https://s4.ax1x.com/2022/01/13/7lDKA0.png"
},
{
min_name: "羊滋滋",
src: "https://s4.ax1x.com/2022/01/13/7lDKA0.png"
},
{
min_name: "可诺贝儿",
src: "https://s4.ax1x.com/2022/01/13/7lDKA0.png"
},
{
min_name: "卡洛塔妮",
src: "https://s4.ax1x.com/2022/01/13/7lDKA0.png"
},
{
min_name: "合生元",
src: "https://s4.ax1x.com/2022/01/13/7lDKA0.png"
},
{
min_name: "佳贝艾特",
src: "https://s4.ax1x.com/2022/01/13/7lDKA0.png"
},
]
},
{
title: "牛奶粉",
children: [{
min_name: "品牌名",
src: "https://s4.ax1x.com/2022/01/13/7lD19U.png"
},
{
min_name: "品牌名",
src: "https://s4.ax1x.com/2022/01/13/7lD19U.png"
},
{
min_name: "品牌名",
src: "https://s4.ax1x.com/2022/01/13/7lD19U.png"
},
{
min_name: "品牌名",
src: "https://s4.ax1x.com/2022/01/13/7lD19U.png"
},
{
min_name: "品牌名",
src: "https://s4.ax1x.com/2022/01/13/7lD19U.png"
},
{
min_name: "品牌名",
src: "https://s4.ax1x.com/2022/01/13/7lD19U.png"
},
{
min_name: "品牌名",
src: "https://s4.ax1x.com/2022/01/13/7lD19U.png"
}
]
},
{
title: "特殊奶粉",
children: [{
min_name: "特奶",
src: "https://s4.ax1x.com/2022/01/13/7lD58S.png"
},
{
min_name: "特奶",
src: "https://s4.ax1x.com/2022/01/13/7lD58S.png"
},
{
min_name: "特奶",
src: "https://s4.ax1x.com/2022/01/13/7lD58S.png"
}
]
},
{
title: "营养辅食",
children: [{
min_name: "营辅",
src: "https://s4.ax1x.com/2022/01/13/7lDdN6.png"
},
{
min_name: "营辅",
src: "https://s4.ax1x.com/2022/01/13/7lDdN6.png"
},
{
min_name: "营辅",
src: "https://s4.ax1x.com/2022/01/13/7lDdN6.png"
},
{
min_name: "营辅",
src: "https://s4.ax1x.com/2022/01/13/7lDdN6.png"
},
{
min_name: "营辅",
src: "https://s4.ax1x.com/2022/01/13/7lDdN6.png"
}
]
},
{
title: "营养品",
children: [{
min_name: "营养品",
src: "https://s4.ax1x.com/2022/01/13/7lDbbn.png"
},
{
min_name: "营养品",
src: "https://s4.ax1x.com/2022/01/13/7lDbbn.png"
}
]
},
{
title: "男童服饰",
children: [{
min_name: "男童",
src: "https://s4.ax1x.com/2022/01/13/7lDREt.png"
},
{
min_name: "男童",
src: "https://s4.ax1x.com/2022/01/13/7lDREt.png"
},
{
min_name: "男童",
src: "https://s4.ax1x.com/2022/01/13/7lDREt.png"
},
{
min_name: "男童",
src: "https://s4.ax1x.com/2022/01/13/7lDREt.png"
}, {
min_name: "男童",
src: "https://s4.ax1x.com/2022/01/13/7lDREt.png"
}, {
min_name: "男童",
src: "https://s4.ax1x.com/2022/01/13/7lDREt.png"
},
]
},
{
title: "女童服饰",
children: [{
min_name: "女童",
src: "https://s4.ax1x.com/2022/01/13/7lDREt.png"
},
{
min_name: "女童",
src: "https://s4.ax1x.com/2022/01/13/7lDREt.png"
},
{
min_name: "女童",
src: "https://s4.ax1x.com/2022/01/13/7lDREt.png"
},
]
},
{
title: "益智玩具",
children: [{
min_name: "玩具",
src: "https://s4.ax1x.com/2022/01/13/7lDf4f.png"
},
{
min_name: "玩具",
src: "https://s4.ax1x.com/2022/01/13/7lDf4f.png"
},
{
min_name: "玩具",
src: "https://s4.ax1x.com/2022/01/13/7lDf4f.png"
},
{
min_name: "玩具",
src: "https://s4.ax1x.com/2022/01/13/7lDf4f.png"
},
{
min_name: "玩具",
src: "https://s4.ax1x.com/2022/01/13/7lDf4f.png"
},
{
min_name: "玩具",
src: "https://s4.ax1x.com/2022/01/13/7lDf4f.png"
},
]
},
{
title: "宝宝用品",
children: [{
min_name: "宝宝",
src: "https://s4.ax1x.com/2022/01/13/7lDrge.png"
},
{
min_name: "宝宝",
src: "https://s4.ax1x.com/2022/01/13/7lDrge.png"
},
]
},
{
title: "妈妈用品",
children: [{
min_name: "妈妈",
src: "https://s4.ax1x.com/2022/01/13/7lDcDA.png"
}]
},
{
title: "家庭用品",
children: [{
min_name: "fimly",
src: "https://s4.ax1x.com/2022/01/13/7lfSx0.png"
},
{
min_name: "fimly",
src: "https://s4.ax1x.com/2022/01/13/7lfSx0.png"
},
{
min_name: "fimly",
src: "https://s4.ax1x.com/2022/01/13/7lfSx0.png"
},
]
}
],
/*被点击的左侧菜单 */
currentIndex: 0,
rightcontent: [],
cates: []
},
/*左侧菜单点击事件*/
handleItemTap(e) {
// console窗口获取下标值
const { index } = e.currentTarget.dataset;
// let right_content = this.right_content[index];
this.setData({
// 把index这个数值给到currentIndex变量
currentIndex: index,
// right_content
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
这是wxml文件
<view class="cates">
<!-- 搜索框开始 -->
<SearchInput></SearchInput>
<!-- 搜索框结束 -->
<view class="cates_container">
<!-- 左侧分类菜单 -->
<scroll-view scroll-y class="left_menu">
<!-- date-index用来传递index参数 bindtap冒泡 -->
<view class="left_item {{index===currentIndex?'active':''}}"
wx:for="{{right_content}}" wx:for-item="item" wx:for-index="index" wx:key="name"
bindtap="handleItemTap"
data-index="{{index}}">
{{item.title}}
</view>
</scroll-view>
<!-- 右侧商品内容 -->
<scroll-view scroll-y class="right_content">
<!-- 大数组进行遍历 -->
<view class="goods_group" wx:for="{{right_content}}" wx:for-item="item1" wx:for-index="index1">
<!-- 大数组标签 -->
<view class="goods_title">
<view class="title">{{item1.title}}</view>
</view>
<!-- 一个打标签 然后打印此标签下所有内容(小图片+文字) -->
<view class="goods_list">
<!-- 超链接 包含小图片和图片下方文字 -->
<navigator wx:for="{{item1.children}}" wx:for-item="item2" wx:for-index="index2" wx:key="">
<!-- 小图片 添加一个mode-->
<image class="min_img" mode="widthFix" src="{{item2.src}}"></image>
<!-- 小图片下方文字 -->
<view class="good_names">{{item2.min_name}}</view>
</navigator>
</view>
</view>
</scroll-view>
</view>
</view>