VantUI_van-tabs_active属性使用无效踩坑记录

已于 2023-08-29 15:48:47 修改
阅读量2k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： 微信小程序 bug
于 2023-08-29 15:29:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wsfufua/article/details/132562167
作者在使用van-tabs组件时遇到问题，当active属性设置为默认字符串0时，内容丢失且无法自动切换。解决办法是将active转换为数值类型并利用change事件实时更新，避免二次触发。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文档中显示属性值可以为字符或者数值在这里插入图片描述

但是实际上在使用过程中，我给active添加了默认数值0以及字符串的’0’
设置默认字符串’0’，van-tabs的下滑线可以正常停留在索引0的位置，但是van-tab的内容出现丢失。
后续更改active的属性值页面都没有效果。同时切换页面的tab栏也没有引起active的变化。
设置默认值为数字0，则一切正常显示。

因此我在希望更改视图时，需要将active强转为数值类型的才影响到视图。
同时因为操作视图时不会同时更改active的值，需要使用bind:change
在这里插入图片描述
通过事件对象中的e.detail.index 拿到当前激活的tab栏索引下标实时更新active的值，但为了避免二次触发更新我没有进行强转只是将值记录到了active中。
在这里插入图片描述
在我的业务刚进来的时候指定激活的active时进行强转成数值类型数据触发视图更新
在这里插入图片描述

躺平阿福
关注
项目过程中使用vant组件使用踩坑记录
无知者无畏
05-11 286
vant踩坑记录
vant （ weapp ） - - - - - van-tabs组件选中下划线初始位置异常
Dark_programmer的博客
07-01 1024
vant （ weapp ） - - - - - van-tabs组件选中下划线初始位置异常
vue 项目 vant-tabs 初始化 下标 active 无效
xiamoziqian的博客
01-06 1万+
需求： 获取路由中的参数值，根据参数值 初始化active的值，效果如下 初始代码： <van-tabs v-model:active="active" @click="onClick" swipeable title-active-color="#4EC8F2" line-width="19" line-height="2"> <van-tab v-for="(item, index) in tabs" :key="index" :title="item"> 这是内容 &
vant4 tabbar页面active没生效
ADYe
08-23 700
页面很简单，就两个tabbar，但是进入页面后，【新建】这个不会自动加载。搞了挺久，发现在给这个主页配置路由的时候，加个重定向到【新建】页面就好了。
van-tabs设置activeName不生效
weixin_48605889的博客
09-20 695
van-tabs请求接口后设置activeName不生效，记录日常开发遇到的小问题
Vant 3 #Tab标签页 #scrollspy滚动导航模式下手动修改active时无法滚动到指定的内容页问题
weixin_50577324的博客
03-04 4305
van-tabs 左右切换时是可以通过修改active的值来实现内容的切换； <template> <Tabs ref="tabs" @click-tab="handleTab" @scroll="handleScroll" v-model:active="activeName" sticky lazy-render > <!-- scrollspy --> <Tab v-for="item
ElementUI 踩坑解决：van-tabs传值监听不到，修改不到v-model:active，切换不了下标的；
weixin_44206947的博客
03-03 2051
ElementUI 踩坑解决：van-tabs传值监听不到，修改不到v-model:active，切换不了下标的；
解决vant title-active-color与title-inactive-color不生效问题
01-18
2、使用vant组件 npm install vant –S 全局引用时在main.js引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 假如你引入之后发现页面的样式和组件都挂载了，但是console控制台会报错...
解决vant中 tab栏遇到的坑 van-tabs
01-18
话不多说，先看下问题描述： 我的需求：（和头条的tab栏类似 ，单击查看...坑的问题在于：van-tabs，里面的v-model默认值是0，但是类型却写着 number | string 。 但是，在此时用缓存赋值给 v-model = ” active ”
angular_ui-router_bootstrap-tabs
05-01
标题“angular_ui-router_bootstrap-tabs”指的是一个使用AngularJS、UI-Router和Bootstrap Tab插件的项目，这个项目展示了如何在AngularJS应用中结合使用这些技术来构建动态的、基于路由的选项卡式用户界面。...
ditchnet-tabs-taglib_0.8.zip_Tabú_ditchnet ta_ditchnet-tabs-tagl
09-22
【标题】"ditchnet-tabs-taglib_0.8.zip" 是一个开源项目，它提供了一个名为 "Tabú ditchnet ta" 的标签库，专门用于创建多tab标签的效果。这个库的版本是0.8，可能包含了一些优化和改进。 【描述】"tabs tag" 指...
解决vant中van-tab样式不生效问题
嘎嘎不想打工啦的博客
11-02 3001
加粗样式 1.确保安装babel-plugin-import 安装方法:npm install --save babel-plugin-import 2.确保babel.config.js有配置 安装并配置完成后样式方可生效。
小程序引用vant使用tab标签页active动态设置值
qq_45967222的博客
07-27 4445
第一个点击页面的wxml点击传的值： 第一个点击页面的js点击传的值： OntionText(e){ let active = e.currentTarget.dataset.active wx.navigateTo({ url: '/pages/myOrder/myOrder?active='+active, }) }, 点击跳转到的页面的wxml: active是初始索引，一定要有name值，才能动态的改索引值。 *点击跳转到的页面的js:
动态设置van-tabs-active背景颜色
weixin_58034343的博客
07-22 926
当项目中颜色需要动态设置时（颜色从后端获取），使用的时vant-tabs组件。
【Vant Weapp】van-tab 标签页
joanmelon的博客
11-09 8485
!-- 右侧筛选 -->//.......filter {}.img {}important;}data:{tabs: [{day: '购入',id: 1},{day: '销售',id: 2},],}})},// 筛选操作},
使用vant-tabs改变active-tab样式
qq_44900902的博客
02-17 1846
实现视觉效果的方案有很多种，尝试不用方案达到最好的兼容效果。的属性，导致在边界问题上出现了换行或显示完全的情况。的大小，直接改变字体大小对于内容比较长的。来说可能会超出边界，就出现了上述情况。初始化的时候已经确定了单个。后的样式，这里是需要激活。字体变粗，字号变大。
vant tab组件动态改变van-tab title后显示不全问题，需要手动滑动
我总是词不达意的博客
05-24 7152
vant tab组件
Vant Tab标签页
热门推荐
我想我是海 冬天的大海 心情随风轻摆
04-13 1万+
引入 import Vue from 'vue'; import { Tab, Tabs } from 'vant'; Vue.use(Tab); Vue.use(Tabs); 代码演示 基础用法 通过v-model绑定当前激活标签对应的索引值，默认情况下启用第一个标签 <van-tabs v-model="active"> <van-tab title="标签 1">内容 1</van-tab> <van-tab title="标签
求解Vant-weapp中tabs的问题？
有个派大星的博客
11-20 1万+
最近在做小程序，需要做一个页面tab滚动的功能，在很多app里面很常见 基于项目里面搭配的样式组件，我采用了https://youzan.github.io/vant-weapp/#/tab， 不同入口进入的时候，都会带一个参数，然后使用setData改变active的值，本以为这样就实现了，但是发现，从不同界面进入的的时候，默认进入的都是data初始化时候active的值，我已经在o...
.el-tabs__item.is-disabled是调整.el-tabs__active-bar的颜色为灰色
最新发布
06-18
### 修改 `.el-tabs__item.is-disabled` 状态下 `.el-tabs__active-bar` 的颜色 在 Element UI 中，`.el-tabs__active-bar` 是用于指示当前激活的标签栏的元素。当需要修改 `.el-tabs__item.is-disabled` 状态下的 `.el-tabs__active-bar` 颜色时，可以通过自定义 CSS 样式实现。以下是一个解决方案： #### 自定义样式覆盖默认样式 由于 `.el-tabs__active-bar` 的颜色是由父级标签的状态决定的，因此需要通过更具体的 CSS 选择器来覆盖默认样式。以下是代码示例： ```css /* 覆盖 .el-tabs__item.is-disabled 状态下的 .el-tabs__active-bar 颜色 */ .el-tabs__nav .el-tabs__item.is-disabled + .el-tabs__active-bar { background-color: gray !important; /* 设置为灰色 */ } ``` 上述代码中，`+` 选择器用于定位 `.el-tabs__item.is-disabled` 后面紧邻的 `.el-tabs__active-bar` 元素，并将其背景颜色设置为灰色。需要注意的是，Element UI 的样式可能具有较高的优先级，因此使用了 `!important` 来确保样式生效[^1]。 #### 注意事项 - 如果 `.el-tabs__active-bar` 并未直接跟随在 `.el-tabs__item.is-disabled` 后，则需要根据实际 DOM 结构调整选择器。 - 在某些情况下，`.el-tabs__active-bar` 的位置和颜色可能依赖于其他状态（如 `.is-active`），因此需要进一步检查具体的行为逻辑。 #### Vue 组件中的应用 如果需要动态修改样式，可以在 Vue 组件中通过 `style` 或 `class` 动态绑定实现： ```vue <template> <el-tabs v-model="activeTab" class="custom-tabs"> <el-tab-pane label="选项一" name="first" :disabled="isDisabled">选项一内容</el-tab-pane> <el-tab-pane label="选项二" name="second">选项二内容</el-tab-pane> </el-tabs> </template> <script> export default { data() { return { activeTab: 'first', isDisabled: true }; } }; </script> <style scoped> .custom-tabs .el-tabs__nav .el-tabs__item.is-disabled + .el-tabs__active-bar { background-color: gray !important; } </style> ``` 上述代码中，`custom-tabs` 类名用于限定样式的作用范围，避免全局污染[^1]。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值