設(shè)計(jì)頁(yè)面時(shí)希望效果：左側(cè)側(cè)邊導(dǎo)航欄，右側(cè)內(nèi)容。點(diǎn)擊左側(cè)導(dǎo)航欄的不同塊，右側(cè)顯示不同內(nèi)容。

采用了vant組件中側(cè)邊導(dǎo)航欄van-sidebar，van-sidebar子標(biāo)簽包括多個(gè)van-sidebar-item

實(shí)現(xiàn)方法：

van-sidebar中設(shè)置 bind:change="onChange"：

        <van-sidebar  active-key="{{ activeKey }}" bind:change="onChange">
                <van-sidebar-item title="農(nóng)家水果" custom-class="cellTab" />
                <van-sidebar-item title="農(nóng)家蔬菜" 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="加工調(diào)料" custom-class="cellTab"/>
       </van-sidebar>

隨后在js文件中編寫(xiě)onChange（event），其中event.detail即對(duì)應(yīng)導(dǎo)航欄塊的索引。以event.detail作switch參數(shù)，在case中通過(guò)this.setData設(shè)置右側(cè)區(qū)域內(nèi)容。
?

onChange(event) {
    switch(event.detail){
      case 0:
        this.setData({
          goods:[
            {
              price:"5.6元/斤",
              tag:"熱銷(xiāo)",
              title:"農(nóng)家大橘子",
              image:"../myImage/orange.webp",
              value:"5"
            },
            {
              price:"6.6元/斤",
              tag:"新品",
              title:"農(nóng)家大香蕉",
              image:"../myImage/banana.webp",
              value:"4"
            }
          ]
        });
        break;
        case 1:
          this.setData({
            goods:[
              {
                price:"5.6元/斤",
                tag:"熱銷(xiāo)",
                title:"農(nóng)家白菜",
                image:"../myImage/vegetable.webp",
                value:"5"
              },
              {
                price:"6.6元/斤",
                tag:"新品",
                title:"農(nóng)家西紅柿",
                image:"../myImage/tomato.webp",
                value:"4"
              }
            ]
          })
    }
  }

即可實(shí)現(xiàn)跳轉(zhuǎn)效果文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-536049.html

到了這里，關(guān)于微信小程序+vant組件 側(cè)邊導(dǎo)航欄切換顯示的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！