Implementierungscode für die Schiebeschalterfunktion der Registerkarte „Links“ und „Rechts“ des WeChat-Applet

<Klasse anzeigen="Container">
 <!-- Tab-Navigationsleiste -->
 <!-- Mit dem Attribut „scroll-left“ lässt sich die Position der Bildlaufleiste steuern-->
 <!-- scroll-with-animation Scrollen fügt einen Animationsübergang hinzu -->
 <!-- 
  scroll-x="wahr"
  navScrollLeft: 0 Anfangswert navData: Tab-Text
  Verwenden Sie wx:for-item, um den Variablennamen des aktuellen Elements des Arrays anzugeben.
  Verwenden Sie wx:for-index, um den Variablennamen des aktuellen Index des Arrays anzugeben:
  -->

  <!--tabs -->
 <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
  <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
   <!-- Bestimmen Sie, ob es ausgewählt ist, und legen Sie den Stil fest, wenn es ausgewählt ist-->
   <!-- switchNav -->
   <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">
    {{navItem.text}}</view>
  </block>
 </scroll-ansicht>


 <!-- Seiteninhalt -->
 <!-- duration="300": Dauer der Gleitanimation -->
 <!-- switchTab -->
 <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
  <swiper-item wx:für="{{[0,1,2,3,4,5,6]}}" wx:für-item="tabItem" wx:für-index="idx" wx:key="idx"
   Klasse="Tab-Inhalt">
   {{tabItem}}
  </swiper-item>
 </swiper>
</Ansicht>

//index.js
//Anwendungsinstanz abrufen const app = getApp()

Seite({
 Daten: {
  Navigationsdaten:[
   {
    Text: 'Neuigkeiten'
   },
   {
    Text: 'Geständnis'
   },
   {
    Text: ‚Zum Mitnehmen‘
   },
   {
    Text: „Werde Nachhilfelehrer“
   },
   {
    Text: „Finde einen Nachhilfelehrer“
   },
   {
    Text: „Ein Haus mieten“
   },
   {
    Text: 'Fahrschule'
   }
  ],
  aktuellerTab: 0,
  navScrollLeft: 0
 },
 //Ereignisverarbeitungsfunktion onLoad: function () {
  
 },
 switchNav(Ereignis){
  // Die ID des aktuellen Tabs abrufen
  var cur = event.currentTarget.dataset.current; 
  //Jede Tab-Option nimmt 1/5 der Breite ein
  var singleNavWidth = this.data.windowWidth / 5;

  //Tabulatoroption zentriert this.setData({
   navScrollLeft: (aktuell - 2) * singleNavWidth
  }) 
  // Überprüfen Sie, ob die ID mit der ID des angeklickten Tabs übereinstimmt, if (this.data.currentTab == cur) {
   gibt false zurück;
  } anders {
   dies.setData({
    currentTab: aktuell
   })
  }
 },
 
 switchTab(Ereignis){
  var cur = Ereignis.Detail.aktuell;
  var singleNavWidth = this.data.windowWidth / 5;
  dies.setData({
   currentTab: aktuell,
   navScrollLeft: (aktuell - 2) * singleNavWidth
  });
 }
})

/**index.wxss**/
Seite {
 Breite: 100 %;
 Höhe: 100%;
}

.container {
 Breite: 100 %;
 Höhe: 100%;
}

.nav {
 /* Breite und Höhe der Tab-Navigation festlegen*/
 Höhe: 80rpx;
 Breite: 100 %;

 /* Wenn Sie zwei umrandete Kästen nebeneinander platzieren müssen,
 Dies lässt sich durch die Einstellung der Boxgröße auf „Border-Box“ erreichen. */
 Box-Größe: Rahmenbox;

 Überlauf: versteckt;

 /* Mitte */
 Zeilenhöhe: 80rpx;

 Hintergrund:
 #f7f7f7;

 Schriftgröße: 16px;

 /* Gibt an, dass der Text in einem Absatz nicht umbrochen wird: */
 Leerzeichen: Nowrap;

 Position: fest;
 oben: 0;
 links: 0;
 Z-Index: 99;
}

.nav-Element {
 Breite: 20 %;
 Anzeige: Inline-Block;
 Textausrichtung: zentriert;
}

.nav-item.active {
 Farbe:
 Grün;
}

.tab-box {
 Hintergrund:
 rgb(31, 201, 96);
 /* Setze dies auf die Höhe von nav*/
 Polsterung oben: 80rpx;
 Höhe: 100%;
 Box-Größe: Rahmenbox;
}

.tab-Inhalt {
 /* Beschneidet die linken/rechten Ränder des Inhalts in einem Div-Element – ​​wenn dieser über den Inhaltsbereich des Elements hinausgeht: */
 Überlauf-y: scrollen;
}

// *******************************Navigationsleiste wählt aus, um die ID und die Position der Navigationsleiste abzurufen**************************************
 tabSelect(e) {
 console.log("Ergebnis:", e);
 //Newsdatenbank betreiben var cur = e.currentTarget.dataset.id;
 //Tabulatoroption zentriert this.setData({
  // Die ID jedes Tabs
  TabCur: e.currentTarget.dataset.id,
  
  //Adaptives Scrollen nach links: (e.currentTarget.dataset.id) * 60,
 })

 // Überprüfen Sie, ob die ID mit der ID des angeklickten Tabs übereinstimmt, if (this.data.currentTab == cur) {
  gibt false zurück;
 } anders {
  dies.setData({
  currentTab: aktuell
  })
 }
 Konsole.log(e.currentTarget.dataset.id);
 Konsole.log(diese.Daten.TabCur);
 console.log("horizontale Bildlaufleistenposition", this.data.scrollLeft);
 },
 switchTab(e) {
 konsole.log(e);
 var cur = e.detail.current;
 dies.setData({
  TabCur: aktuell,
  scrollLeft: aktuell * 60,
 });
 }