sidebar侧边导航的基础使用

 

效果：

 

1.利用Layout 组件提供了 24列栅格进行左右布局,

2.获取数据遍历导航栏文字

  <van-col span="8" >
 <van-sidebar
  v-model="activeKey" 

  @change="onChange"
  >
  <van-sidebar-item :title="v.cname"   v-for="v in catearr" 
  :key="v.cid" />

</van-sidebar>
</van-col>

3.右边布局，利用onchange监听索引事件，当点击是把对应的索引赋值给对应的数据，实现页面把不同数据切换，

 methods: {
    async getcate(index){
      const res = await cate()
        console.log(res);
        this.swipe=res.data.data.swipe
        this.catearr=res.data.data.cate
        this.carr=this.catearr[index].children    
    },
    onChange(index){
  
     this.getcate(index)

    }
  },

<van-card v-for="(v,index) in carr" :key="index"
 
  :price="v.price"
  :desc="v.tintro"
  :title="v.tname"
  :thumb="v.timg"
/>