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

已于 2023-08-29 15:48:47 修改
阅读量1.2k 收藏 1
点赞数
文章标签： 微信小程序 bug
于 2023-08-29 15:29:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsfufua/article/details/132562167
版权

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

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

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

躺平阿福
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
记一次踩雷经历：Vue引入vant /van-tabs组件后不显示/van-tabs和子路由的封装后Failed to resolve directive: keep-scroll-position
明日复明日的博客
05-05 8054
核心错误应该是[Vue warn]: Property or method "$t" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based compone...
angular_ui-router_bootstrap-tabs
05-01
标题“angular_ui-router_bootstrap-tabs”指的是一个使用AngularJS、UI-Router和Bootstrap Tab插件的项目，这个项目展示了如何在AngularJS应用中结合使用这些技术来构建动态的、基于路由的选项卡式用户界面。...
ElementUI 踩坑解决：van-tabs传值监听不到，修改不到v-model:active，切换不了下标的；
weixin_44206947的博客
03-03 1453
ElementUI 踩坑解决：van-tabs传值监听不到，修改不到v-model:active，切换不了下标的；
vue 项目 vant-tabs 初始化 下标 active 无效
xiamoziqian的博客
01-06 8976
需求： 获取路由中的参数值，根据参数值 初始化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"> 这是内容 &
【vue3 vant 踩坑记录】
xh1506101064的博客
06-24 1400
起因：tab的active默认值为0，路由跳转到界面的值为2，使用的是setup语法糖，获取路由传参值之后，赋值给active，但是，发现active，没有被改变。 我们可以发现这个值是已经修改成功了的，但是视图并没有跟着变化，在视图中 active 的值依旧为0。以为是没有及时更新，但是使用的是ref应该不会存在这种情况。后来无意间调用了一下Tab的change事件，发现组件创建时，调用了tab的change事件，并且是最后才调用的。下面是我调用change是事件的代码，可以看出active 改为2之后，
vant4 tabbar页面active没生效
ADYe
08-23 460
页面很简单，就两个tabbar，但是进入页面后，【新建】这个不会自动加载。搞了挺久，发现在给这个主页配置路由的时候，加个重定向到【新建】页面就好了。
Vue 3使用vant 的tabbar组件，默认值不生效
weixin_45018898的博客
05-09 709
在reactive中声明activeTab变量，给组件指定默认值，结果不生效，之后将activeTab 单独拿出来，使用ref()声明就好了，刚接触vue3，记录一下。
解决vant中van-tab样式不生效问题
嘎嘎不想打工啦的博客
11-02 2616
加粗样式 1.确保安装babel-plugin-import 安装方法:npm install --save babel-plugin-import 2.确保babel.config.js有配置 安装并配置完成后样式方可生效。
Vant 3 #Tab标签页 #scrollspy滚动导航模式下手动修改active时无法滚动到指定的内容页问题
weixin_50577324的博客
03-04 3699
van-tabs 左右切换时是可以通过修改active的值来实现内容的切换； <template> <Tabs ref="tabs" @click-tab="handleTab" @scroll="handleScroll" v-model:active="activeName" sticky lazy-render > <!-- scrollspy --> <Tab v-for="item
解决vant中 tab栏遇到的坑 van-tabs
01-18
话不多说，先看下问题描述： 我的需求：（和头条的tab栏类似 ，单击查看...坑的问题在于：van-tabs，里面的v-model默认值是0，但是类型却写着 number | string 。 但是，在此时用缓存赋值给 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控制台会报错...
ui.tabs.rar_javascript_javascript-ui_tabsui_ui
09-21
在UI设计中，选项卡（Tabs）是一种常见的交互元素，用于组织和展示大量内容，使得用户可以在多个相关但独立的视图之间轻松切换。在Web开发领域，JavaScript库和框架提供了许多实现选项卡功能的方法。这里我们将深入...
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 Weapp】van-tab 标签页
joanmelon的博客
11-09 7575
!-- 右侧筛选 -->//.......filter {}.img {}important;}data:{tabs: [{day: '购入',id: 1},{day: '销售',id: 2},],}})},// 筛选操作},
小程序引用vant使用tab标签页active动态设置值
qq_45967222的博客
07-27 3993
第一个点击页面的wxml点击传的值： 第一个点击页面的js点击传的值： OntionText(e){ let active = e.currentTarget.dataset.active wx.navigateTo({ url: '/pages/myOrder/myOrder?active='+active, }) }, 点击跳转到的页面的wxml: active是初始索引，一定要有name值，才能动态的改索引值。 *点击跳转到的页面的js:
Vant Tab标签页
我想我是海 冬天的大海 心情随风轻摆
04-13 8970
引入 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="标签
Vant4的tabbar为什么在mounted里设置了页面检查actvie的值并且修改了active但是还不能跳转设置了active的值的BUG
zgm2093146753的博客
02-23 250
其他的能点动，并且有事件，但是没点击样式，首页压根点击不了。将mounted事件改成beforeMount()事件就行。在一开始active为0，并且mounted事件为。发现页面压根就跳转不了首页。
求解Vant-weapp中tabs的问题？
有个派大星的博客
11-20 9841
最近在做小程序，需要做一个页面tab滚动的功能，在很多app里面很常见 基于项目里面搭配的样式组件，我采用了https://youzan.github.io/vant-weapp/#/tab， 不同入口进入的时候，都会带一个参数，然后使用setData改变active的值，本以为这样就实现了，但是发现，从不同界面进入的的时候，默认进入的都是data初始化时候active的值，我已经在o...
微信小程序留言板2
最新发布
m0_72189003的博客
07-02 286
【代码】微信小程序留言板2。
van-tabs active改变无效
01-04
van-tabs是基于Vue.js的一个标签页组件，active属性用来控制当前激活的标签页。如果在使用过程中发现active属性的改变无效，可能是由于以下几个原因造成的： 1. 未正确绑定active属性：在使用van-tabs组件时，需要正确绑定active属性，确保active属性能够正确反映当前激活的标签页。可能是在绑定active属性时出现了错误，需要检查一下active属性的绑定是否正确。 2. 数据不符合预期：active属性的值通常是一个与标签页相关联的唯一标识，如index值或者标签页的名称。如果active属性的值不符合预期，可能导致标签页无法正确激活。此时需要检查active属性的值是否与标签页的唯一标识对应，确保数据符合预期。 3. 组件未正确引入或初始化：如果在使用van-tabs组件时发现active属性的改变无效，可能是由于组件未正确引入或初始化所致。在使用组件前，需要正确引入组件并确保组件已正确初始化，否则会导致active属性的改变无效。 总之，要解决van-tabs active改变无效的问题，需要仔细检查active属性的绑定、数据是否符合预期以及组件的引入和初始化。通过仔细检查和分析，可找到并解决active属性改变无效的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值