当前位置: 代码迷 >> 综合 >> vant tabs sticky模式下的bug
  详细解决方案

vant tabs sticky模式下的bug

热度:81   发布时间:2024-01-12 18:26:04.0

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的值,导致滚动后看不到吸顶,因为我的页面顶部都有个自定义的导航给挡住了,汗颜。