热心网友9527 2022-01-14 18:08 采纳率: 0%
浏览 80

请教一下大家,小程序分类页,左侧点击后,右侧如何随之跳转到对应内容

请大家看一下 添加什么才可以实现左侧点,右侧也切换
问题相关代码,请勿粘贴截图
```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> 
运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果
  • 写回答

3条回答 默认 最新

报告相同问题?

问题事件

  • 创建了问题 1月14日

悬赏问题

  • ¥15 名为“Product”的列已属于此 DataTable
  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题