请教一下大家，小程序分类页，左侧点击后，右侧如何随之跳转到对应内容
请大家看一下 添加什么才可以实现左侧点，右侧也切换
问题相关代码，请勿粘贴截图
```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>
运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果
微信小程序 scroll-view实现锚点滑动_a314753967的博客-CSDN博客_微信小程序锚点滚动 转载，原文： 微信小程序 scroll-view实现锚点滑动的示例 https://www.jb51.net/article/129897.htm选择scroll-view(可滚动视图区域)组件来实现锚点效果。具体实现具体API就不赘述了，可以去看官方文档，这里讲几个需要注意的地方，下面是一个示意的scroll-view组件代码，上面的几个属性是必须的：<scroll... 
https://blog.csdn.net/a314753967/article/details/82997060
给左边设置点击事件，通过下标一致来实现两边显示内容一一对应。js语法和jq都有写
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li {
list-style: none;
height: 50px;
line-height: 50px;
text-align: center;
}
a {
text-decoration: none;
color: #fff;
}
.box{
display: flex;
width: 1000px;
height: 500px;
margin: 50px auto;
}
ul {
width: 180px;
padding-top: 50px;
background-color: #111;
}
ul li.active{
background-color: #555;
}
.box .content {
flex: 1;
position: relative;
}
.box .content div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
.box .content div.active{
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active"><a href="javascript:">第1行导航</a></li>
<li><a href="javascript:">第2行导航</a></li>
<li><a href="javascript:">第3行导航</a></li>
<li><a href="javascript:">第4行导航</a></li>
<li><a href="javascript:">第5行导航</a></li>
</ul>
<div class="content">
<div style="background-color: #aff;" class="active"></div>
<div style="background-color: #faf;"></div>
<div style="background-color: #ffa;"></div>
<div style="background-color: #faa;"></div>
<div style="background-color: #aaf;"></div>
</div>
</div>
<script src="./jquery.js"></script>
<script>
let liList = document.querySelectorAll('li')
let divList = document.querySelectorAll('.content div')
for(let i = 0;i<liList.length;i++){
liList[i].onclick=function(){
document.querySelector('li.active').classList.remove('active')
document.querySelector('div.active').classList.remove('active')
liList[i].classList.add('active')
divList[i].classList.add('active')
}
}
// $('li').on('click',function(){
// $('.active').removeClass('active')
// $(this).addClass('active')
// $('.content div').eq($(this).index()).addClass('active')
// })
</script>
</body>
</html>
你好，可以看看你这个分类界面的所有代码嘛，我有些功能和你这个相似，还没写出来，非常感谢