效果:
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"
/>