微信小程序-錨點定位

引言：在商品詳情頁面，通常會有商品圖顯示、商品主要信息、評價、商品詳情等，這時候最好是在最上面加上導航，點擊導航定位到對應的頁面位置，好比京東的商品詳情頁面

對於通常的PC端網頁，只須要使用<a href="#element_Id">，而後在地址欄最後加上#element_Id，就能很方便的跳轉到該元素的位置。

那麼，微信小程序該怎樣解決呢？

解決思路

查找微信小程序的開發文檔，發現可使用scroll-view組件中的屬性scroll-into-view實現

重點

1. 將page的高度設置爲100%；

2. 導航下面的內容部分必須用<scroll-view>包起來

3. 設置scroll-view的高度=屏幕的高度-導航的高度

4. 設置scroll-view的屬性scroll-into-view="{{toView}}"

5. 設置scroll-view的屬性scroll-y="true"

6. 設置錨點<view id="position1">

注意：第四、5步不能換位置，必定是scroll-into-view在scroll-y的前面

上代碼

WXNL

<view class="navigateBox">
    <view bindtap="toViewClick" data-hash="productBox" class="title {{toView=='productBox' ? 'checked':''}}">
      <image wx:if="{{toView=='productBox'}}" src="../images/position.jpg"/>商品</view>
    <view bindtap="toViewClick" data-hash="commentBox" class="title {{toView=='commentBox' ? 'checked':''}}">
      <image wx:if="{{toView=='commentBox'}}" src="../images/position.jpg"/>評價</view>
    <view bindtap="toViewClick" data-hash="infoBox" class="title {{toView=='infoBox' ? 'checked':''}}">
      <image wx:if="{{toView=='infoBox'}}" src="../images/position.jpg"/>詳情</view>
</view>

<scroll-view style="height:{{winHeight}}" scroll-into-view="{{toView}}" scroll-y="true">
    <view id="productBox">商品圖</view>
    <view id="commentBox">商品評價</view>
    <view id="infoBox">商品詳情</view>
</scroll-view>
複製代碼

JS

data: {
    winHeight: '100%',
    toView: 'productBox',//錨點跳轉的ID
}
onLoad(){
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        //屏幕的寬度/屏幕的高度 = 微信固定寬度(750)/微信高度
        that.setData({
          winHeight: res.windowHeight-(res.windowWidth*90/750)+'px' //90爲導航的告訴80+10(margin-bottom)  
        })
      }
    });
}

toViewClick: function (e) {
  this.setData({
    toView: e.target.dataset.hash  
  })
}
複製代碼

WXSS

<style lang="less">

  page{
    height: 100%;
  }

  .navigateBox{
    background: #fff;
    height: 80rpx;
    padding: 0 100rpx;
    margin-bottom: 10rpx;

    .title{
      margin: 20rpx 46rpx;
      float: left;
      font-size: 27rpx;
      width: 60rpx;
      padding-left: 30rpx;
    }

    image{
      width: 30rpx;
      height: 30rpx;
      margin-left: -30rpx;
    }

    .checked{
      color: #f73c3c;
    }
  }
複製代碼