背景:
使用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类型,才有效,否则再怎么设置都是无效的。
方案
这里active的值需要是number类型
onLoad: function(option) { const type = option.type || 0; this.active = type*1 }