小程序滚动吸顶

之前做了h5的滚动吸顶，传送门
场景：这里在小程序里也需要用到滚动吸顶，其实差不多，当屏幕向下滚动到tab栏的时候，tab始终在顶部固定，向上滚动超出tab，则还原。

原型图

原理：比较滚动的高度和初始时tab距离顶部的高度，超过则给tab添加fixed的类名，反之移除；滚动的高度通过onPageScroll判断，初始时tab的高度通过wx.createSelectorQuery()来获取。

返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。

示例：

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function(res){
  res[0].top       // #the-id节点的上边界坐标
  res[1].scrollTop // 显示区域的竖直滚动位置
})

效果如图：

1.gif

主代码：

onPageScroll: function (e) {
    var that = this;
    var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
    //判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断
  //navbarInitTop 是tab距离顶部的高度
    var isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false;
    //为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
    if (that.data.isFixedTop === isSatisfy) {
      return false;
    }
    that.setData({
      isFixedTop: isSatisfy
    });
  },

完整代码点击查看