Benutzerdefinierte Menünavigation im WeChat-Applet zum Erzielen eines Treppeneffekts

const query = wx.createSelectorQuery()
Abfrage.Auswahl('.menu_nav').boundingClientRect(Funktion(res) {
    let obj = {}
    wenn (res && res.top) {
        obj[item.attr] = parseInt(res.top)
    }
}).exec()

lass arr = [
         { Name: '.menu-nav', Attr: 'menu_top', AddNum: 0 },
         { Name: '.panel1', Attr: 'panel1_top', AddNum: 0 },
         { Name: '.panel2', Attr: 'panel2_top', AddNum: 0 },
         { Name: '.panel3', Attr: 'panel3_top', AddNum: 0 },
         { Name: '.panel4', Attr: 'panel4_top', AddNum: 0 },
     ]
     arr.forEach((item, i) => {
         wx.createSelectorQuery().select(item.name).boundingClientRect(function(res) {
             let obj = {}
             wenn (res && res.top) {
                 obj[item.attr] = parseInt(res.top)

                 wenn (Artikel.AddNum) {
                     obj[item.attr] += item.addNum
                 }
                 dass.setData({
                     ...obj
                 })
             }

         }).exec()

     })

// Auf Seiten-Scrollen achten onPageScroll: function(e) {
     lass hTop = parseInt(e.scrollTop)
     // Menü automatisch wechseln let tab=0
      wenn (hTop >= (this.data['panel4_top'] - this.data.menu_top)) {
        tab=3
     }sonst wenn (hTop >= (this.data['panel3_top'] - this.data.menu_top)){
        tab=2
     }
     sonst wenn (hTop >= (this.data['panel2_top'] - this.data.menu_top)){
         tab=1
     }
     dies.setData({
         tabIndex: Registerkarte,
     })
 },

// Seiten/index/index.js
Seite({

  /**
   * Ausgangsdaten der Seite */
  Daten: {
    tabIndex: 0, // Aktuelles Menü menuList: ['Menü 1', 'Menü 2', 'Menü 3', 'Menü 4'], // Navigationsmenü tabFixed: false, // Ob positioniert werden soll// Der Abstand vom oberen Rand der Startseite menu_top: 0,
    panel1_top: 0,
    panel2_top: 0,
    panel3_top: 0,
    panel4_top: 0,
  },

  /**
   * Lebenszyklusfunktion - auf Seitenladen warten*/
  onLoad: Funktion (Optionen) {

  },
  onShow:Funktion (Optionen){
    dies.getTopDistance()
  },
  // Höhe vom oberen Rand der Seite ermitteln getTopDistance() {
    lass das = dies
    lass arr = [{
        Name: '.menu-nav',
        attr: 'Menü oben',
        Zusatznummer: 0
      },
      {
        Name: '.panel1',
        attr: 'panel1_top',
        Zusatznummer: 0
      },
      {
        Name: '.panel2',
        attr: 'panel2_top',
        Zusatznummer: 0
      },
      {
        Name: '.panel3',
        attr: 'panel3_top',
        Zusatznummer: 0
      },
      {
        Name: '.panel4',
        attr: 'panel4_top',
        Zusatznummer: 0
      },
    ]
    arr.forEach((item, i) => {
      wx.createSelectorQuery().select(item.name).boundingClientRect(Funktion (res) {
        let obj = {}
        wenn (res && res.top) {
          obj[item.attr] = parseInt(res.top)

          wenn (Artikel.AddNum) {
            obj[item.attr] += item.addNum
          }
          dass.setData({
            ...obj
          })
        }

      }).exec()

    })
  },
  // Einstellungen für den Navigationsleistenschalter setSelectType(event) {
    let index = Ereignis.aktuellesTarget.dataset.type
    dies.setData({
      tabIndex: Index,
    })
    let arr = ['Panel1_oben', 'Panel2_oben', 'Panel3_oben', 'Panel4_oben']
    lass _dies = dies
    wx.pageScrollTo({
      scrollTop: _this.data[arr[index]],
      Dauer: 500
    })
  },
  // Auf Seiten-Scrollen achten onPageScroll: function (e) {
    lass hTop = parseInt(e.scrollTop)

    // Muss das Menü oben positioniert werden? if (hTop > this.data.menu_top) {
      dies.setData({
        tabFixed: true
      })
    } anders {
      dies.setData({
        tabFixed: false
      })
    }

    // Menü automatisch wechseln, wenn (hTop >= (this.data['panel4_top'] - this.data.menu_top)) {
      dies.setData({
        tabIndex: 3,
      })
    }sonst wenn (hTop >= (this.data['panel3_top'] - this.data.menu_top)){
      dies.setData({
        tabIndex: 2,
      })
    }
    sonst wenn (hTop >= (this.data['panel2_top'] - this.data.menu_top)){
      dies.setData({
        tabIndex: 1,
      })
    }anders{
      dies.setData({
        tabIndex: 0,
      })
    }
  },
})

<Ansichtsklasse="Main">
    <Klasse anzeigen="Kopf">
        Ich bin der Kopfbereich</view>
    <view class="{{tabFixed?'is-fixed':''}} Menü-Navigation">
        <text wx:for="{{menuList}}" class="{{tabIndex==index?'is-select':''}}" bind:tap="setSelectType" data-type='{{index}}'>{{item}}</text>
        
    </Ansicht>
    <Klasse anzeigen="Inhalt">
        <view class="panel1 panel">Seite 1</view>
        <view class="panel2 panel">Seite 2</view>
        <view class="panel3 panel">Seite 3</view>
        <view class="panel4 panel">Seite 4</view>
    </Ansicht>
</Ansicht>

.Menü-Navigation {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: Abstand herum;
  Farbe: Schwarz;
  Polsterung: 10px 0;
  Breite: 100 %;
  Hintergrundfarbe: weiß;
}

.ist-Auswahl {
  Farbe: rot;
}

.Kopf {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Schriftgröße: 40px;
  Höhe: 120px;
  Hintergrundfarbe: grüngelb;
}

.ist behoben {
  Position: fest;
  oben: 0;
}

.Panel {
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Inhalt ausrichten: zentriert;
  Schriftgröße: 20px;
}

.panel1 {
  Höhe: 800rpx;
  Hintergrundfarbe: Rebeccapurple;
}

.panel2 {
  Höhe: 700rpx;
  Hintergrundfarbe: blau;
}

.panel3 {
  Höhe: 1000rpx;
  Hintergrundfarbe: orange;
}

.panel4 {
  Höhe: 1200rpx;
  Hintergrundfarbe: rosa;
}