微信小程序-上下滑動內容控制導航的選中

上一篇文章演示瞭如何使用錨點定位，即點擊導航的時候跳轉到相應的內容。可是若想反過來（滑動內容的時候控制導航的樣式），就須要再作進一步的思考！

如果用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裏實現數據綁定，刷新數據
}
複製代碼

至此，上下滑動內容控制導航的樣式就實現了。下一篇會結合錨點定位，實現點擊導航跳轉到相應的內容和滑動內容實現導航的選中！