<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://blog.csdn.net/dmyc1027/article/details/124834166

这个例子只讲了左侧的导航，右侧的内容要怎么写，才能显示出来 。