小程序的吸顶和滚动tab匹配

<view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view>
<view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view>


<view class="navbar-wrap">
  <view class="column {{isFixedTop?'fixed':''}}" id="navbar">

    <view wx:for="{{list}}" wx:key="{{index}}" data-index="{{index}}" bindtap="selectIndex"
      class="{{select_index == index ? 'block active' : 'block'}}">{{index}}</view>
    <!-- <view class="block">限时优惠</view>
    <view class="block">火爆热搜</view>
    <view class="block">猜你喜欢</view> -->
  </view>
  <!-- 用于吸顶后 占位用的 -->
  <view class="column" wx:if="{{isFixedTop}}"></view>
</view>

<scroll-view style="height:100%" scroll-y="true" bindscrolltolower="bottom" bindscroll="scroll" bindscrolltolower="bottom" scroll-with-animation="true"  scroll-into-view="{{'index'+active_index}}">
  <view style="height:100%">
    <view wx:for="{{list}}" wx:key="index">
      <view id="index{{index}}" class="index-name" data-id="{{index}}">{{item.name}}</view>
      <view class="weui-grids">
        <block wx:for="{{item.items}}" wx:key="index">
          <view class="weui-grid" hover-class="weui-grid_active" hover-stay-time="200">
            <image class="weui-grid__icon" src="{{icon}}" />
            <view class="weui-grid__label">{{item}}</view>
          </view>
        </block>
      </view>
    </view>
  </view>
</scroll-view>

page{
  height:100%
}
view, text {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.navbar-wrap {
  width: 100%;
}

.navbar-wrap .column {
  width: 100%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background: #fff;
  border-bottom: solid 1px #eee;

  top: 0;
  left: 0;
  z-index: 100;
}

.navbar-wrap .column.fixed {
  position: fixed;
}

Page({
  data: {
    navbarInitTop: 0, //导航栏初始化距顶部的距离
    isFixedTop: false, //是否固定顶部
   
      icon: 'https://www.kunquer.com/favicon.ico',
      select_index: 0,
      list: [],
      flag:false,
   
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let list = [];
 
    for(let i = 0; i < 5; i++) {
      list.push({
        name: i,
        items: Array.from(Array(9), (v, k) => '测试的'+i)
      });
    }
    this.setData({list: list});
  },
  onReady:function() {
    wx.createSelectorQuery().selectAll('.index-name').boundingClientRect(results => {
      results.forEach(rect => {
        let key = 'list['+rect.dataset.id+'].top';
        console.log(rect.top)
        this.setData({[key]: rect.top-this.data.navbarInitTop-85});// 这里的值根据自己的页面布局减去顶部的高度
        console.log(key)
      });
    }).exec();
  },
  scroll(e) {
    console.log(e)
    console.log(this.data.list)
    this.data.flag || this.data.list.some((v, k) => {
      if(v.top <= e.detail.scrollTop) {
        let i= k+1;
        console.log(i)
        
        if(this.data.list[i] && this.data.list[i].top > e.detail.scrollTop) {
          this.setData({select_index: k});
          return true;
        }
        if(i+1>this.data.list.length)
        {
          // 到最后时候切换
          this.setData({select_index: this.data.list.length-1}); 
        }
      }
    })
  },
  bottom(e) {
    this.setData({select_index: this.data.list.length-1});
  },
  selectIndex(e) {
    this.setData({
      select_index: e.currentTarget.dataset.index,
      active_index: e.currentTarget.dataset.index,
      flag: true
    });
    setTimeout(() => this.setData({flag: false}), 1000);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    var that = this;

    if (that.data.navbarInitTop == 0) {

      //获取节点距离顶部的距离
      wx.createSelectorQuery().select('#navbar').boundingClientRect(function(rect) {
        if (rect && rect.top > 0) {
          var navbarInitTop = parseInt(rect.top);
          that.setData({
            navbarInitTop: navbarInitTop
          });
        }
      }).exec();

    }
  },

  /**
   * 监听页面滑动事件
   */
  onPageScroll: function(e) {
    var that = this;
    var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度

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

    that.setData({
      isFixedTop: isSatisfy
    });
  }


})