微信小程式-錨點定位

孟小歡發表於2019-01-23
微信小程式

引言：在商品詳情頁面，一般會有商品圖顯示、商品主要資訊、評價、商品詳情等，這時候最好是在最上面加上導航，點選導航定位到對應的頁面位置，比如京東的商品詳情頁面

微信小程式-錨點定位

對於一般的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">

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

上程式碼

WXNL
<
view class="navigateBox">
    <
view @tap="toViewClick" data-hash="productBox" class="title {{toView=='productBox' ? 'checked':''
  }
  }">
      <
image wx:if="{{toView=='productBox'
  }
  }" src="../images/position.jpg"/>
商品<
/view>
    <
view @tap="toViewClick" data-hash="commentBox" class="title {{toView=='commentBox' ? 'checked':''
  }
  }">
      <
image wx:if="{{toView=='commentBox'
  }
  }" src="../images/position.jpg"/>
評價<
/view>
    <
view @tap="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.winHeight = res.windowHeight-(res.windowWidth*90/750)+'px';
//90為導航的告訴80+10(margin-bottom)      
  }    
  });

  }methods = { 
   toViewClick: function (e) { 
     this.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;
    
  }  
  }複製程式碼

來源：https://juejin.im/post/5c48307be51d45067235572d#comment

相關文章