解决vant中 tab栏遇到的坑 van-tabs


Posted in Javascript onNovember 04, 2020

话不多说,先看下问题描述:

我的需求:(和头条的tab栏类似 ,单击查看头条tab栏)

点击tab栏,下方展示出来当前tab栏下的内容列表(A页面),点击列表进入详情内容(B页面),但是返回(A页面)的时候,需要显示刚才被点击的tab栏高亮显示。(如果tab栏横向有滚动条,那也得让被选中的高亮显示)。

所以,大部分人的解决办法就是将当前选中的tab的索引缓存起来,等回到该页面的时候,让被缓存的那个高亮显示出来。

坑的问题在于:van-tabs,里面的v-model默认值是0,但是类型却写着 number | string 。

解决vant中 tab栏遇到的坑 van-tabs

但是,在此时用缓存赋值给 v-model = " active " 的时候,active的值需要是number类型,才有效,否则再怎么设置都是无效的。

【代码放入项目可直接执行】

<template>
 <div>
  <van-tabs v-model="active" 
   @click="tabHandler"
   :ellipsis="false"
   :border="false"
   >
   <van-tab v-for="(tabname,idx) in tabList" :key="idx" :title="tabname"></van-tab>
  </van-tabs>
  <van-button @click="toDetailHandler">去详情页</van-button>
 </div>
</template>
<script>
export default{
 data(){
  return{
   active: Number(localStorage.getItem('activeIdx'))?Number(localStorage.getItem('activeIdx')):0,
   tabList:['111111','2222222','3333333','44444444','55555','666666','7777777','88888','999999999'],
  }
 },
 methods:{
  // tab点击事件
  tabHandler(idx){
   this.active = idx;
   localStorage.setItem('activeIdx',idx) // 将选中的tab缓存起来
  },
  // 去详情页
  toDetailHandler(){
   this.$router.push('/tab1')
  }
 }
}
</script>

最终的效果图是这样的,和头条的tab栏的效果是一样的。点击查看 头条tab效果

解决vant中 tab栏遇到的坑 van-tabs

补充知识:vue移动端框架van-sticky粘性布局,实现原理和失效原因及注意点

说到粘性布局,我们最常见的就算在app tab选项卡随页面滚动到顶部后悬停在那,看效果

解决vant中 tab栏遇到的坑 van-tabs

要实现这个效果,最简单的办法就是在css样式里添加position:sticky就可以实现,就这么简单,比用js监听页面滚动,然后达到一定高度样式变为fixed,简单且性能好。

vue 的van-sticky组件实现粘性的原理就是通过添加position:sticky实现的,但是如果你使用了position:sticky后失效,并没有效果的原因有:

1.父元素高度没子元素高,通常为父元素设置height:100%;

2:父元素设置了overflow:hidden,overflow-x:hidden,overflow-y:hidden,或者overflow:auto属性都能影响到

其中父元素是指所有父元素,不单单是上一级父元素,在vue中如果失效了别忘了看app.vue组件里是不是设置了这些。

解决好失效问题后,我们再看van-sticky的其中一个悬停的时候距离顶部的距离offset-top

offset-top单位为px,在pc端没问题,但在移动端就有问题了,比如你设计稿距离顶部的距离为90px,如果你直接offset-top=90,那么在手机上就会距离很远,

用window.devicePixelRatio获取设备的像素,然后再进行换算,说实话不同手机上还是有差别,有的手机达到效果,有的没达到

目前我是用了获取元素offsetHeight在赋值回去,如this.$refs.getheight.offsetHeight,经测试能准确达到固定的位置,

如果各位有其他好办法,请在下面留言,大家一起学习。

以上这篇解决vant中 tab栏遇到的坑 van-tabs就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中的Split使用方法与技巧
Mar 09 Javascript
js资料toString 方法
Mar 13 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 #Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 #Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 #Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
Nov 04 #Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 #Javascript
Vue绑定用户接口实现代码示例
Nov 04 #Javascript
vant picker+popup 自定义三级联动案例
Nov 04 #Javascript
You might like
php中将网址转换为超链接的函数
2011/09/02 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
php代码架构的八点注意事项
2016/01/25 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
PyQt5 对图片进行缩放的实例
2019/06/18 Python
python多线程与多进程及其区别详解
2019/08/08 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
爱游人:Travelliker
2017/09/05 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
在子网210.27.48.21/30种有多少个可用地址?分别是什么?
2014/07/27 面试题
本科生个人求职自荐信
2013/09/26 职场文书
考核评语大全
2014/04/29 职场文书
春风化雨观后感
2015/06/11 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫