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

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