小程序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'
      })
    }
  }

})