vant tabs sticky模式下的bug

vant tabs sticky模式下，本来应该在滑动一段距离后才吸顶，结果页面加载完成就吸顶了。

解决方式:给sticky属性增加一个控制变量，当页面滑动时，变量置为true。

实施：

1、给tabs外层增加一个父级用于滚动监听，css设置：

height: calc(100vh - 54px);

overflow: hidden scroll;

2、添加监听：

methods中增加滚动处理函数

handleScroll() {

let top = document.querySelector(".list-new").scrollTop;

if (top > 80 && !this.stickyFlag) {

this.stickyFlag = true;

}

mounted中增加

document

.querySelector(".list-new")

.addEventListener("scroll", this.handleScroll);

因为只是页面加载时有问题，正常滑动之后没有问题了，所以控制变量的值一直未true也没有问题。

    <div class="list-new"><van-tabsv-model="active":sticky="stickyFlag":offset-top="54"scrollspy><van-tabv-for="section in dataShow":key="`section.type-${section.num}`"><template #title>{{ section.type }}刊{{ section.data.length }}</template></van-tab></van-tabs></div>

另：tabs每次引用我都犯的错误：没有设置offset-top的值，导致滚动后看不到吸顶，因为我的页面顶部都有个自定义的导航给挡住了，汗颜。

vant tabs sticky模式下的bug相关推荐

QQ牧场在高速模式下的一些小bug
高速模式下图片质量正常模式今天打开了QQ空间,牧场已经开放公测了,开通了之后,尝试玩了一下,感觉几得意.进行鼠标右键有一个高速模式和正常模式.尝试了高速模式和正常模式之下,初步看到高速模式开启会让 ...
weex android 滑动事件,【报Bug】weex编译模式下slider组件 @scroll 事件, 滑块左右滑动, @scroll 回调的值始终是负数, 判断不了左右动作...
详细问题描述 weex编译模式下slider组件 @change事件, 滑块左右滑动, @change回调的值始终是负数, 判断不了左右动作 weex官方文档 (DCloud产品不会有明显的bug,所 ...
在打印预览模式下使用Chrome的Element Inspector？
本文翻译自:Using Chrome's Element Inspector in Print Preview Mode? I am working on developing a website a ...
BOOL 值在 debug 和 release 模式下初始化不一样！！！
原文:http://www.cppblog.com/lai3d/archive/2009/07/08/89514.html 未初始化的bool成员变量在Debug下默认值为false,Test下默认t ...
360浏览器 ajax取缓存,Angularjs在360兼容模式下取数据缓存问题的解决办法
测试提了一个bug,在360浏览器兼容模式下,删除页面数据需要手动刷新浏览器才能看到最新的数据.首先要复现当时的问题,很容易就复现了,但是发现在360浏览器兼容模式下无法打开开发者工具.好在经过反复重 ...
敏捷开发模式下如何更好的进行测试
最近CTO组建了一个敏捷开发团队,团队人员包括 PM.设计.开发.测试角色,主要由PM来主导团队走向,因为以前并没有参加过敏捷开发的经验,对敏捷开发做了简单理解后,参考了前人的一些意见,总结出在敏 ...
将数据库设置为运行在限制模式下
将数据库设置为运行在限制模式下如果要维护数据库的结果或者要对数据库进行数据的导出导入操作时,此时应该尽量限制其他会话进程,保证数据库的操作运行在安全状态下.同时对使用数据的库的用户也可以起到避免读取 ...
物联网模式下的多活数据中心架构认识与实践
做互联网应用很重要的一点是要保证服务可用性,特别是某些业务更是需要7*24小时不间断的对外提供服务,任何停机.宕机都会引起大面积的用户不满.持续可用性是把业务服务化时一个需要考虑的重要指标,很多时候我 ...
前后端分离开发模式下后端质量的保证 —— 单元测试
概述在今天, 前后端分离已经是首选的一个开发模式.这对于后端团队来说其实是一个好消息,减轻任务并且更专注.在测试方面,就更加依赖于单元测试对于API以及后端业务逻辑的较验.当然单元测试并非在前后端分 ...

vant tabs sticky模式下的bug

vant tabs sticky模式下的bug相关推荐

最新文章

热门文章