zoukankan      html  css  js  c++  java
  • vant weapp tab标签页切换标题浮动无法复原

     最近在做小程序用到了 vant weapp这个ui框架中的tab切换功能,开启了sticky粘性布局,即往下滑动,标题要flex浮动上去
    碰到的问题是:如页面内只有一个tab切换,没有其他内容,tab标题随着滚动浮动上去,如果滚动到最顶部,无法复原,导致遮挡,如下图

     

    解决方案:使用 createSelectorQuery 方法获取到dom元素的 scrollTop 值,如果滚动到了顶部,即 scrollTop值为0,就在顶部增加一个边距,如下图

    //监听页面滚动
      onPageScroll(event) {
        let that = this;
        const query = this.createSelectorQuery();
        query.select('.tabcon').boundingClientRect();
        query.selectViewport().scrollOffset();
        query.exec(function(res){
          // 如果滚动位置是0 就加边距 解决vant tab自带bug
          if (res[1].scrollTop == 0) {
            that.setData({
              scrollTop: true
            })
          };
        })

     注意!代码要写在 onPageScroll 监听滚动方法中。

    前路漫漫,吾将上下而求索,不乱于心,方得始终。与君共勉。

  • 相关阅读:
    mobileSelect学习
    使用qrcode生成二维码
    点点点右边有内容
    搜索框search
    input样式和修改
    art-template模板引擎高级使用
    Nodejs中的路径问题
    异步编程(回调函数,promise)
    在nodejs中操作数据库(MongoDB和MySQL为例)
    MongoDB数据库
  • 原文地址:https://www.cnblogs.com/douyage/p/12162207.html
Copyright © 2011-2022 走看看