小程序scroll-view實現錨點跳轉

在微信小程序中，使用 scroll-view 實現長頁面的錨點跳轉。主要是使用 scroll-into-view屬性， 在這裏做個記錄。
wxml

<view class="tab-section" >
    <view class="{{activeView =='productBox' ? 'active':''}}" bindtap="toViewClick" data-toview="productBox">商品</view>
    <view class="{{activeView =='infoBox' ? 'active':''}}" bindtap="toViewClick" data-toview="infoBox">詳情</view>
    <view class="{{activeView =='commentBox' ? 'active':''}}" bindtap="toViewClick" data-toview="commentBox">評價</view>
  </view>

  <scroll-view class="good-wrap" 
  style="height:{{winHeight}}"
  scroll-into-view="{{toView}}"
  scroll-y="true" 
  scroll-with-animation="true" 
  bindscroll="pageScroll">
    <!-- 商品 -->
    <view id="productBox" class="content img-section">
      商品內容
    </view>
    <!-- 詳情 -->
    <view id="infoBox" class="content detail-section">
      詳情內容
    </view>
    <!-- 評價 -->
    <view id="commentBox" class="content evaluate-section">
      評價內容
    </view>
  </scroll-view>

  <view class="fixed-section">
    <view class="cartBtn" bindtap="addCart">加入購物車</view>
    <view class="buyBtn" bindtap="toBuy">立即購買</view>
  </view>

wxss

page {
  background-color: #eee;
}
.tab-section {
  width: 80%;
  height: 80rpx;
  padding: 10rpx 10%;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 11;
}
.tab-section view {
  border-bottom: 6rpx solid transparent;
}
.tab-section .active {
  border-bottom: 6rpx solid #f00;
  color: #f00;
}
.good-wrap {
  position: relative;
  width: 100%;
  padding-top: 100rpx;
}
.content {
  width: 100%;
  height: 1000rpx;
  text-align: center;
  background-color: #fff;
}
.fixed-section {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #fff;
  z-index: 11;
}
.fixed-section view {
  width: 50%;
  text-align: center;
}
.cartBtn {
  border-right: 1rpx #bbb solid;
}

js

Page({
  /**
   * 頁面的初始數據
   */
  data: {
    winHeight: '100%', //scroll-view的高度
    toView: 'productBox', //錨點跳轉的id  
    activeView: 'productBox', //高亮的導航view
    tabHeight: 0,
    productBoxTop: 0,
    infoBoxTop: 0,
    commentBoxTop: 0
  },
 
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function(options) {
    var that = this
    wx.getSystemInfo({
      success: function(res) {
        console.log(res)
        // 屏幕的寬度/屏幕的高度 = 微信固定寬度(750)/微信高度(設計稿一般都是以750爲標準)
        //375/X = 750/100   頂部導航的高度100rpx轉爲px單位
        let height = res.windowWidth * 100 / 750;
        that.setData({
          tabHeight: height,
          winHeight: res.windowHeight - height - height + 'px'
          //底部加入購物車的高度跟導航一樣都是100rpx
        })
      },
    })
  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function() {
    let that = this;
    let query = wx.createSelectorQuery();
    query.select('#productBox').boundingClientRect(rect => { //獲取詳情部分距離頁面頂部高度
      that.setData({
        productBoxTop: rect.top
      })
    }).exec()
    query.select('#infoBox').boundingClientRect(rect => { //獲取詳情部分距離頁面頂部高度
      that.setData({
        infoBoxTop: rect.top
      })
    }).exec()
    query.select('#commentBox').boundingClientRect(rect => { //獲取評論距離頁面頂部高度
      that.setData({
        commentBoxTop: rect.top
      })
    }).exec()
  },

  //tab切換增加active
  toViewClick: function (e) {
    console.log(e)
    let toview = e.currentTarget.dataset.toview
    this.setData({
      toView: toview
    })
  },
  //滾動
  pageScroll: function(e) {
    console.log('scrollTop:'+e.detail.scrollTop)
    let that = this
    let scrollTop = e.detail.scrollTop //scroll-view滾動條距頂部的距離
    let productBoxTop = that.data.productBoxTop,
        infoBoxTop = that.data.infoBoxTop,
        commentBoxTop = that.data.commentBoxTop,
        tabHeight = that.data.tabHeight;
    //console.log(productBoxTop, infoBoxTop, commentBoxTop)
    //將scroll-view滾動條距頂部的距離與各節點距離scroll-view頂部的top值比較
    if (scrollTop <= that.data.infoBoxTop - tabHeight ) {
      that.setData({
        activeView: 'productBox'
      })
    } else if (scrollTop > that.data.infoBoxTop - tabHeight && scrollTop < that.data.commentBoxTop - tabHeight ) {
      that.setData({
        activeView: 'infoBox'
      })
    } else {
      that.setData({
        activeView: 'commentBox'
      })
    }
  }

})