uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案

简介: uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案

背景:

使用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
}


目录
相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
2天前
|
小程序 云计算 Android开发
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
11 2
|
2天前
|
小程序 开发者
uni-app小程序超过2M怎么办?
uni-app小程序超过2M怎么办?
8 1
|
5天前
|
小程序
|
6天前
|
小程序 数据安全/隐私保护
|
5天前
|
小程序
|
9天前
|
小程序
|
26天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
167 3
|
1月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
43 0
微信小程序更新提醒uniapp