微信小程序-上下滑动内容控制导航的选中

上一篇文章演示了如何使用锚点定位，即点击导航的时候跳转到相应的内容。可是若想反过来（滑动内容的时候控制导航的样式），就须要再作进一步的思考！

如果用JS实现，思路：

1. 获取内容上下滑动的时候卷上去的高度
2. 获取导航对应模块距离内容顶部的高度
3. 经过第一步和第二步获取的高度比较，控制导航的选中样式

那么，在微信小程序里怎样实现呢？

查找微信小程序相关的文档以后，并无获得比较优化的解决思路，换句话说，就是微信没有本身的实现方法，因此咱们根据JS的实现思路来实现！

WXML结构

<view class="navigateBox">
  <view class="title">
    <image wx:if="{{actionView=='productBox'}}" src="../images/position.png"/>
    <view class="{{actionView=='productBox' ? 'checked':''}}">商品</view>
  </view>
  <view class="title">
    <image wx:if="{{actionView=='commentBox'}}" src="../images/position.png"/>
    <view class="{{actionView=='commentBox' ? 'checked':''}}">评价</view>
  </view>
  <view class="title">
    <image wx:if="{{actionView=='infoBox'}}" src="../images/position.png"/>
    <view class="{{actionView=='infoBox' ? 'checked':''}}">详情</view>
  </view>
</view>

<scroll-view @scroll="scrollTo">
  <view id="productBox"></view>
  <view id="commentBox"></view>
  <view id="infoBox"></view>
</scroll-view>    
复制代码

在data里定义须要使用的变量

data={
    actionView: 'productBox',//控制导航选中
    productBoxTop: 0,//商品模块距离顶部的距离
    commentBoxTop: 0,//评价模块距离顶部的距离
    infoBoxTop: 0,//详情模块距离顶部的距离
}
复制代码

获取内容上下滑动时卷上去的高度

在WXML部分，添加绑定事件

<scroll-view bindscroll="scrollTo">
复制代码

内容上下滑动时距离内容顶部的距离

let scrollTop = e.detail.scrollTop;
复制代码

获取导航对应模块距离内容顶部的高度

须要借助微信小程序里的createSelectorQuery()方法

new Promise(resolve => {
  let query = wx.createSelectorQuery();
  query.select('#productBox').boundingClientRect();
  query.select('#commentBox').boundingClientRect();
  query.select('#infoBox').boundingClientRect();
  query.exec(function (res) {
    resolve(res);
  });
}).then(res => {
  this.productBoxTop = res[0].top;
  this.commentBoxTop = res[1].top;
  this.infoBoxTop = res[2].top;
});
复制代码

注意：createSelectorQuery()方法是异步的，因此利用Promise机制变成同步

经过两个高度的比较，控制导航的选中

scrollTo: function(e){
  let scrollTop = e.detail.scrollTop+100;//增长100是由于在内容滑入屏幕中间位置的时候就能显示选中导航的样式

  if(scrollTop >= this.infoBoxTop){
    this.actionView = 'infoBox';
  }else if(scrollTop >= this.commentBoxTop){
    this.actionView = 'commentBox';
  }else {
    this.actionView = 'productBox';
  }

  //this.$apply();//WEPY里实现数据绑定，刷新数据
}
复制代码

至此，上下滑动内容控制导航的样式就实现了。下一篇会结合锚点定位，实现点击导航跳转到相应的内容和滑动内容实现导航的选中！