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 監聽滾動方法中。

前路漫漫，吾將上下而求索，不亂於心，方得始終。與君共勉。