之前做了h5的滾動(dòng)吸頂，傳送門
場景：這里在小程序里也需要用到滾動(dòng)吸頂，其實(shí)差不多，當(dāng)屏幕向下滾動(dòng)到tab欄的時(shí)候，tab始終在頂部固定，向上滾動(dòng)超出tab，則還原。

原型圖

原理：比較滾動(dòng)的高度和初始時(shí)tab距離頂部的高度，超過則給tab添加fixed的類名，反之移除；滾動(dòng)的高度通過onPageScroll判斷，初始時(shí)tab的高度通過wx.createSelectorQuery()來獲取。

返回一個(gè) SelectorQuery 對(duì)象實(shí)例。在自定義組件或包含自定義組件的頁面中，應(yīng)使用 this.createSelectorQuery() 來代替。

示例：

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
  res[0].top       // #the-id節(jié)點(diǎn)的上邊界坐標(biāo)
  res[1].scrollTop // 顯示區(qū)域的豎直滾動(dòng)位置
})

效果如圖：

1.gif

主代碼：

onPageScroll: function (e) {
    var that = this;
    var scrollTop = parseInt(e.scrollTop); //滾動(dòng)條距離頂部高度
    //判斷'滾動(dòng)條'滾動(dòng)的距離 和 '元素在初始時(shí)'距頂部的距離進(jìn)行判斷
  //navbarInitTop 是tab距離頂部的高度
    var isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false;
    //為了防止不停的setData, 這兒做了一個(gè)等式判斷。 只有處于吸頂?shù)呐R界值才會(huì)不相等
    if (that.data.isFixedTop === isSatisfy) {
      return false;
    }
    that.setData({
      isFixedTop: isSatisfy
    });
  },

完整代碼點(diǎn)擊查看