微信小程序+vant组件 侧边导航栏切换显示

设计页面时希望效果：左侧侧边导航栏，右侧内容。点击左侧导航栏的不同块，右侧显示不同内容。

采用了vant组件中侧边导航栏van-sidebar，van-sidebar子标签包括多个van-sidebar-item

实现方法：

van-sidebar中设置 bind:change="onChange"：

        <van-sidebar  active-key="{{ activeKey }}" bind:change="onChange">
                <van-sidebar-item title="农家水果" custom-class="cellTab" />
                <van-sidebar-item title="农家蔬菜" custom-class="cellTab"/>
                <van-sidebar-item title="自种茶叶" custom-class="cellTab"/>
                <van-sidebar-item title="加工零食" custom-class="cellTab"/>
                <van-sidebar-item title="加工饮料" custom-class="cellTab"/>
                <van-sidebar-item title="加工调料" custom-class="cellTab"/>
       </van-sidebar>

随后在js文件中编写onChange（event），其中event.detail即对应导航栏块的索引。以event.detail作switch参数，在case中通过this.setData设置右侧区域内容。
 

onChange(event) {
    switch(event.detail){
      case 0:
        this.setData({
          goods:[
            {
              price:"5.6元/斤",
              tag:"热销",
              title:"农家大橘子",
              image:"../myImage/orange.webp",
              value:"5"
            },
            {
              price:"6.6元/斤",
              tag:"新品",
              title:"农家大香蕉",
              image:"../myImage/banana.webp",
              value:"4"
            }
          ]
        });
        break;
        case 1:
          this.setData({
            goods:[
              {
                price:"5.6元/斤",
                tag:"热销",
                title:"农家白菜",
                image:"../myImage/vegetable.webp",
                value:"5"
              },
              {
                price:"6.6元/斤",
                tag:"新品",
                title:"农家西红柿",
                image:"../myImage/tomato.webp",
                value:"4"
              }
            ]
          })
    }
  }

即可实现跳转效果