微信小程序使用vant weapp tab标签页，从其他页面或编译模式中指定当前页tab标签索引值，tab标签页无变化问题。-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序使用vant weapp tab标签页，从其他页面或编译模式中指定当前页tab标签索引值，tab标签页无变化问题。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vant weapp在微信小程序中的使用

vant weapp 在微信小程序中的如何使用大家可以自行到官网中查看，这里不在细述。官网链接：https://vant-ui.github.io/vant-weapp/#/quickstart

tab标签在项目中使用及遇到的坑

我负责开发小程序商城优惠券部分，在需求中优惠券分为线下券和线上券，线上券和线下券可以来回切换，根据不同的业务需求，需要从其他页面跳转到当前页面，根据跳转路径中所带参数不同，来确定当前页面tab标签索引值，例：url:/page/coupon/coupon?couponType=0 线下券，url:/page/coupon/coupon?couponType=1 线上券，在当前页onLoad内接受携带参数。

1. 页面内使用

微信小程序使用vant weapp tab标签页，从其他页面或编译模式中指定当前页tab标签索引值，tab标签页无变化问题。,微信小程序,小程序
active设定当前激活标签对应的索引值，默认情况下启用第一个标签。

2. 使用效果

微信小程序使用vant weapp tab标签页，从其他页面或编译模式中指定当前页tab标签索引值，tab标签页无变化问题。,微信小程序,小程序

此时我的在当前data中设置couponType为0。

3. 添加编译模式模拟带参跳转该页面

微信小程序使用vant weapp tab标签页，从其他页面或编译模式中指定当前页tab标签索引值，tab标签页无变化问题。,微信小程序,小程序
设置参数couponType为1，期待tab标签当前位置为第二个的线上券。模拟其他页面带参跳转该页面，控制当前页tab标签的索引。

当前页面onLoad 内接收该参数

微信小程序使用vant weapp tab标签页，从其他页面或编译模式中指定当前页tab标签索引值，tab标签页无变化问题。,微信小程序,小程序

遇坑：couponType值已经为1，页面内接口调用也为所期待的线上券，但是tab标签滑块并未移动。

微信小程序使用vant weapp tab标签页，从其他页面或编译模式中指定当前页tab标签索引值，tab标签页无变化问题。,微信小程序,小程序

4. 解决方案

刚发现这个问题时，我多少有点束手无策。在一次无意间查看官网发现，老版本的vant active必须是number类型，而onLoad在接收页面传参时，参数默认为string类型，在赋值到当前页面的couponType时为string类型，active使用的是couponType的值，因此才会无效。