Мини-программа WeChat — якорное позиционирование

Апплет WeChat

Введение: на странице сведений о продукте обычно отображается карта продукта, основная информация о продукте, оценка, сведения о продукте и т. д. В настоящее время лучше всего добавить навигацию вверху, нажмите на навигацию, чтобы найти соответствующую страницу. позиция, например страница сведений о продукте JD.com

Для обычных веб-страниц на стороне ПК просто используйте<a href="#element_Id">, а затем добавьте #element_Id в конце адресной строки, чтобы легко перейти к расположению элемента.

Итак, как решить апплет WeChat?

Решения

Найдите документы по разработке апплета WeChat и узнайте, что вы можете использоватькомпонент прокруткиСвойство scroll-in-to-view в реализации

фокус

  1. Установите высоту страницы на 100%;

  2. Раздел контента под навигацией должен использовать<scroll-view>заворачивать

  3. Установите высоту прокрутки = высота экрана - высота навигации

  4. Установите свойства прокруткиscroll-into-view="{{toView}}"

  5. Установите свойства прокруткиscroll-y="true"

  6. установить точку привязки<view id="position1">

Примечание. Шаги 4 и 5 нельзя изменить, прокрутка в поле зрения должна находиться перед прокруткой-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;
    }
  }
Категории