背景：
使用uni-app开发微信小程序项目，使用的是Vant Weapp实现Tab标签页。
要实现跳转过来，显示默认的当前tab。
在app.json或index.json中引入组件
"usingComponents": {
"van-tab": "@vant/weapp/tab/index",
"van-tabs": "@vant/weapp/tabs/index"
}
通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签。
<van-tabs :active="active">
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
<van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
data中的属性
data() {
return {
active: 0,
}
},
页面接受参数，默认显示对应的tab
onLoad: function(option) {
const type = option.type || 0;
this.active = type
}
问题
到此，貌似没啥问题，但是效果一直都显示在第一个tab。
原因
坑的问题在于：van-tabs，里面的v-model默认值是0，但是类型却写着 number | string 。
但是，在此时用缓存赋值给 v-model = " active " 的时候，active的值需要是number类型，才有效，否则再怎么设置都是无效的。文章来源：https://www.toymoban.com/news/detail-682845.html
方案
这里active的值需要是number类型文章来源地址https://www.toymoban.com/news/detail-682845.html
onLoad: function(option) {
const type = option.type || 0;
this.active = type*1
}
到了这里，关于uni-app开发微信小程序使用vant组件tab栏遇到的坑van-tabs的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[uni-app]使用uni开发微信小程序，请求接口 报错:[“errno“:600002,errMsg“.“request；failurlnot in domain list”](https://imgs.yssmx.com/Uploads/2024/02/604185-1.png)
