階段効果を実現するためのWeChatアプレットカスタムメニューナビゲーション

定数クエリ = wx.createSelectorQuery()
query.select('.menu_nav').boundingClientRect(function(res) {
    obj = {} とします
    （res && res.top）の場合{
        obj[item.attr] = parseInt(res.top)
    }
}).exec()

arr = [とする
         { 名前: '.menu-nav', 属性: 'menu_top', addNum: 0 },
         { 名前: '.panel1'、 属性: 'panel1_top'、 addNum: 0 }、
         { 名前: '.panel2'、 属性: 'panel2_top'、 addNum: 0 },
         { 名前: '.panel3'、 属性: 'panel3_top'、 追加数: 0 }、
         { 名前: '.panel4'、 属性: 'panel4_top'、 追加数: 0 }、
     ]
     arr.forEach((item, i) => {
         wx.createSelectorQuery().select(item.name).boundingClientRect(function(res) {
             obj = {} とします
             （res && res.top）の場合{
                 obj[item.attr] = parseInt(res.top)

                 if (item.addNum) {
                     obj[item.attr] += item.addNum
                 }
                 that.setData({
                     ...オブジェクト
                 })
             }

         }).exec()

     })

// ページスクロールを監視する onPageScroll: function(e) {
     hTop = parseInt(e.scrollTop) とします。
     // メニューを自動的に切り替える let tab=0
      hTop >= (this.data['panel4_top'] - this.data.menu_top) の場合 {
        タブ=3
     }それ以外の場合、hTop >= (this.data['panel3_top'] - this.data.menu_top)){
        タブ=2
     }
     そうでない場合、(hTop >= (this.data['panel2_top'] - this.data.menu_top)){
         タブ=1
     }
     this.setData({
         タブインデックス: タブ、
     })
 },

// ページ/インデックス/index.js
ページ（{

  /**
   * ページの初期データ */
  データ： {
    tabIndex: 0, //現在のメニュー menuList: ['メニュー 1', 'メニュー 2', 'メニュー 3', 'メニュー 4'], //ナビゲーションメニュー tabFixed: false, //配置するかどうか//初期ページの上端からの距離 menu_top: 0,
    パネル1_トップ: 0,
    パネル2_トップ: 0,
    パネル3_トップ: 0,
    パネル4_トップ: 0,
  },

  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数 (オプション) {

  },
  onShow:function (オプション){
    this.getTopDistance()
  },
  // ページ上部からの高さを取得する getTopDistance() {
    それを = これとする
    arr = [{
        名前: '.menu-nav',
        属性: 'menu_top',
        追加数: 0
      },
      {
        名前: '.panel1',
        属性: 'panel1_top',
        追加数: 0
      },
      {
        名前: '.panel2',
        属性: 'panel2_top',
        追加数: 0
      },
      {
        名前: '.panel3',
        属性: 'panel3_top',
        追加数: 0
      },
      {
        名前: '.panel4',
        属性: 'panel4_top',
        追加数: 0
      },
    ]
    arr.forEach((item, i) => {
      wx.createSelectorQuery().select(item.name).boundingClientRect(function (res) {
        obj = {} とします
        （res && res.top）の場合{
          obj[item.attr] = parseInt(res.top)

          if (item.addNum) {
            obj[item.attr] += item.addNum
          }
          that.setData({
            ...オブジェクト
          })
        }

      }).exec()

    })
  },
  // ナビゲーションバースイッチ設定 setSelectType(event) {
    インデックス = event.currentTarget.dataset.type
    this.setData({
      tabIndex: インデックス、
    })
    arr = ['panel1_top', 'panel2_top', 'panel3_top', 'panel4_top'] とします。
    _this = this とします
    wx.pageScrollTo({
      スクロールトップ: _this.data[arr[index]],
      所要時間: 500
    })
  },
  // ページスクロールを監視する onPageScroll: function (e) {
    hTop = parseInt(e.scrollTop) とします。

    // メニューを上部に配置する必要があるかどうか if (hTop > this.data.menu_top) {
      this.setData({
        タブ固定: true
      })
    } それ以外 {
      this.setData({
        タブ固定: false
      })
    }

    // メニューを自動的に切り替える if (hTop >= (this.data['panel4_top'] - this.data.menu_top)) {
      this.setData({
        タブインデックス: 3,
      })
    }それ以外の場合、hTop >= (this.data['panel3_top'] - this.data.menu_top)){
      this.setData({
        タブインデックス: 2,
      })
    }
    そうでない場合、(hTop >= (this.data['panel2_top'] - this.data.menu_top)){
      this.setData({
        タブインデックス: 1,
      })
    }それ以外{
      this.setData({
        タブインデックス: 0,
      })
    }
  },
})

<view class="メイン">
    <view class="head">
        私は頭の部分です</view>
    <view class="{{tabFixed?'is-fixed':''}} メニューナビ">
        <text wx:for="{{menuList}}" class="{{tabIndex==index?'is-select':''}}" bind:tap="setSelectType" data-type='{{index}}'>{{item}}</text>
        
    </ビュー>
    <view class="content">
        <view class="panel1 panel">ページ 1</view>
        <view class="panel2 panel">ページ 2</view>
        <view class="panel3 panel">ページ 3</view>
        <view class="panel4 panel">ページ 4</view>
    </ビュー>
</ビュー>

.メニューナビ{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースを空ける;
  色: 黒;
  パディング: 10px 0;
  幅: 100%;
  背景色: 白;
}

.is-select {
  色: 赤;
}

。頭 {
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  フォントサイズ: 40px;
  高さ: 120px;
  背景色: 緑黄色;
}

.is-fixed {
  位置: 固定;
  上: 0;
}

.パネル{
  ディスプレイ: フレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの中央揃え: 中央;
  フォントサイズ: 20px;
}

.パネル1 {
  高さ: 800rpx;
  背景色: レベッカ紫;
}

.パネル2 {
  高さ: 700rpx;
  背景色: 青;
}

.パネル3 {
  高さ: 1000rpx;
  背景色: オレンジ;
}

.パネル4 {
  高さ: 1200rpx;
  背景色: ピンク;
}