微信小程序+vant组件侧边导航栏切换显示-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序+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"
              }
            ]
          })
    }
  }

即可实现跳转效果文章来源地址https://www.toymoban.com/news/detail-536049.html

到了这里，关于微信小程序+vant组件侧边导航栏切换显示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！