关于vant 使用tabs默认选中问题，产品为需求默认不选中，解决方法

于 2024-05-28 17:10:07 发布
阅读量480 收藏
点赞数 1
文章标签： 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qianduanVIP666/article/details/139271332
版权

今天使用vant  tabs遇到的问题
tabs 默认会选中第一个tab, 翻看各种文档

尝试方法一，tabs v-model绑定为null    不可行

 tabs的v-model绑定为null就不选中了，但是我测试后 还是默认选中了第一个

尝试方法二，通过css 把第一个样式修改为默认，不可行

这个方法会产生另外一个问题，如果页面家在完成后，就点一个，是没有任何反应的，只有点击第二，第三，... 第n  才有反应，然后在点第一个，

产生这个原因就是：默认已经选中了第一个，页面加载完成后再点击第一个是不会出发change事件的，所以后续调用接口的时候 就不会触发。

第三个方案，动态添加一条数据，并巧妙隐藏第一个元素     可行

于是换了个思路，在tabs绑定的数组的最前面手动插入一条数据，并通过css样式巧妙的隐藏就可以实现了  注意：不能把第一个元素display:none；要设置padding,margin,width 为0

前端开发打怪升级ing
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 使用vant插件做tabs切换和无限加载功能的实现
01-18
样例： 1.创建vue项目，不再详述 2.引入vant 之前用过很多插件做这个功能，但是效果都不尽人意，出现各种问题，直到遇到vant这个插件，完美的解决了这些小问题，如有问题，欢迎联系我 安装依赖 npm i vant -S 在main.js中引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 3.在页面中使用 官方写的比我写的好多了，大家可以借鉴，看源代码可能比官方给的文档更直观 官方文档 我在文件中的使用，没有使用下拉刷新的功能，大家可以直接看官网代码： <template> <div
使用prop解决一个checkbox选中后再次选中失效的问题
08-30
"使用prop解决checkbox选中后再次选中失效的问题" 在本篇文章中，我们将讨论使用prop解决checkbox选中后再次选中失效的问题。这个问题是一个常见的前端开发问题，许多开发者都曾经遇到过这种情况。那我们如何使用...
初始化 Vant使用
m0_52243808的博客
08-03 46
如果某个组件是由路由动态切换放在view中，如果不是通过，路由是可复用的就放在components中。
van-tabbar默认选中失效的问题解决方法
huangzhin的博客
05-20 4316
最近写h5项目时初始进入项目时发现van-tabbar的默认选中会失效（全部均未选中），如下图所示 相关代码： <template> <div id="app"> <router-view /> <van-tabbar v-model="active" route v-show="routerName=='study'||routerName=='message'||routerName=='my'"> <va.
解决Vant组件库tabs标签页选中状态与当前页面不匹配
qq_52161116的博客
04-26 1088
通过vue-router的$route.path获取到当前页面的路由路径，然后将路径与组件进行双向数据绑定,同时将的name属性也设置为动态的页面路径。
vant中van-tabs使用中的小问题
最新发布
weixin_44224712的博客
05-09 733
van-tabs 不要默认选中
Vant2的Tabbar标签栏第一个图标一直处于激活、高亮状态，无响应
R__Zoro的博客
01-10 654
Vant2的Tabbar标签栏第一个图标一直处于激活、高亮状态，无响应
vant tabs组件选中第一个下划线位置异常
qq_43583887的博客
06-24 871
vant-tabs第一个下划线异常
解决vant中 tab栏遇到的坑 van-tabs
01-18
话不多说，先看下问题描述： 我的需求：（和头条的tab栏类似 ，单击查看头条tab栏） 点击tab栏，下方展示出来当前tab栏下的内容列表（A页面），点击列表进入详情内容（B页面），但是返回（A页面）的时候，需要显示...
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
10-15
主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
关于vant 的tabbar功能
a_grain_of_wheat的博客
10-19 1209
关于vant 的tabbar , 非tabbar页面和tabbar页面的高亮显示
移动端vant 弹框中包含tab页，记第一个tab,不加载数据问题
weixin_55895406的博客
09-09 1506
vant tab
解决微信小程序引入vant-tabs编译时第一个tab不显示底部线条的问题
weixin_51002293的博客
12-24 996
网上相关答案是直接判断这个数据有没有或者使用tabs组件上的resize方法 我这里使用wx:if="{{其它可以用作判断的数据}}"和resize都是无效的。原因：当tabs渲染时异步获取的数据还没到 拿不到tab的name 组件无法计算线条宽度。解决方法：在tabs组件上新增wx:if="{{tabsList.leng!第一个已经被选中 但是下面本该有的蓝色线条没有。tabsList是动态渲染tab的数据。
vant-ui框架 tab切换list不加载问题（切换后onload不触发）
Wangdr的博客
05-09 7494
遇到的问题：项目里，加载的list，页面上有个切换的tab,实现切换不同的类型，加载不同的list的功能。vant-ui的list就有个bug，当切换tab的时候，它的onload没方法自动触发。然而在当前标签页，如果列表已经加载完毕再去切换，onload就可以实现自动触发 解决办法： tab(i,en){ this.num=i; this.type=en; this.evaluate_list=[];//清空list列表 this.noData=false;//展示列表
vue vant不同tab切换加载更多且返回来后内容不改变的实现
jjw_zyfx的博客
04-02 2441
vue vant不同tab切换加载更多且返回来后内容不改变的实现
vant-tab 切换不同的tab，页面滚动一致
u014105739的博客
11-03 1391
再次返回第一个界面，会发现第一个界面这个时候也回到了顶部，反正不管怎么切换滑动，每个页面的滚动距离都会收到其他界面的影响，会滑动到相同的距离，vant-tab 切换不同的tab, 假如第一个tab下的界面滑动了一段距离， 点击第二个界面初次加载，最后发现是vant-tab 的所有tab 都使用的是同一个滚动条，就是都是最外面的滚动条。解决方法：每个tab界面使用自己的单独滚动条避免此类问题。
van-tabs组件底部横条偏移问题
weixin_44415346的博客
08-20 1647
v解决an-tabs组件底部横条偏移
vant-tabs 超过五个才能横向滚动
xhj233的博客
06-26 929
设置swipe-threshold属性即可。
vant2里面页面刷新默认选中的跟路由地址一样怎么写
06-08
如果你想要在页面刷新后默认选中与路由地址相同的菜单项，可以在 `router/index.js` 中监听路由变化，然后在 `mounted()` 钩子函数中调用一个方法来设置当前激活的菜单项。 具体代码如下所示： ```javascript // router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({ routes: [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue') }, { path: '/about', name: 'About', component: () => import('@/views/About.vue') } ], mode: 'history' }) router.beforeEach((to, from, next) => { // 设置当前激活的菜单项 const activeMenu = to.path setDefaultActiveMenu(activeMenu) next() }) // 设置默认激活的菜单项 function setDefaultActiveMenu(activeMenu) { const menuItems = document.querySelectorAll('.van-sidebar__nav-item') for (let i = 0; i < menuItems.length; i++) { const menuItem = menuItems[i] if (menuItem.getAttribute('to') === activeMenu) { menuItem.classList.add('van-sidebar__nav-item--active') } else { menuItem.classList.remove('van-sidebar__nav-item--active') } } } export default router ``` 在上面的代码中，我们监听了 `beforeEach` 路由钩子函数，在每次路由变化时调用 `setDefaultActiveMenu` 方法来设置当前激活的菜单项。这个方法会通过 `querySelectorAll` 方法获取到所有的菜单项，然后遍历每个菜单项，判断它是否与当前路由地址相同，如果相同则为它添加 `van-sidebar__nav-item--active` 类，否则移除该类。 最后，我们需要在侧边栏组件的 `mounted()` 钩子函数中触发一次 `setDefaultActiveMenu` 方法，以确保在页面刷新后默认选中与路由地址相同的菜单项。 ```html <!-- Sidebar.vue --> <template> <div class="sidebar"> <van-sidebar> <van-sidebar-item to="/" class="sidebar-item"> 首页 </van-sidebar-item> <van-sidebar-item to="/about" class="sidebar-item"> 关于我们 </van-sidebar-item> </van-sidebar> </div> </template> <script> export default { mounted() { // 触发一次设置默认激活的菜单项 const activeMenu = this.$route.path setDefaultActiveMenu(activeMenu) } } </script> ``` 在上面的代码中，我们在 `Sidebar.vue` 组件的 `mounted()` 钩子函数中调用了 `setDefaultActiveMenu` 方法，并传入了当前路由地址，以确保在组件挂载后默认选中与路由地址相同的菜单项。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值