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

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

若是用JS实现，思路：

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

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

查找微信小程序相关的文档之后，并没有得到比较优化的解决思路，换句话说，就是微信没有自己的实现方法，所以我们根据JS的实现思路来实现！

WXML结构

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


"scrollTo">
  "productBox">
  "commentBox">
  "infoBox">
    
复制代码

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

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

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

在WXML部分，添加绑定事件

"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里实现数据绑定，刷新数据
}
复制代码

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