Das WeChat-Applet realisiert eine Links-Rechts-Verknüpfung

In diesem Artikel wird der spezifische Code für das WeChat-Applet zur Erzielung einer Links-Rechts-Verknüpfung zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Kürzlich wurde das Schulkurssystemanalyseprojekt mithilfe des WeChat-Applets erstellt. Nachdem ich das Bestellprojekt ausgewählt hatte, wollte ich bei der Implementierung der Homepage dasselbe wie bei McDonald's-Bestellungen erreichen, mit Kategorien auf der linken Seite und Gerichten auf der rechten Seite. Wenn Sie auf die Kategorie auf der linken Seite klicken, wird auf der rechten Seite zur entsprechenden Kategorie gescrollt, und wenn Sie auf der rechten Seite durch die Gerichte scrollen, wird auch die Kategorie des aktuell auf der linken Seite gescrollten Gerichts hervorgehoben. Lassen Sie uns Ihnen also zunächst die Ergebnisse zeigen!

Obwohl diese Funktion klein ist, denke ich, dass sie sehr nützlich sein wird, sobald Sie das Prinzip der Scroll-Ansicht verstanden haben.

Schauen Sie sich zunächst die offizielle Dokumentation des WeChat Mini-Programms an: Scroll-View

Hier stelle ich die Eigenschaften vor, die ich nach meinem eigenen Verständnis verwende:

• scroll-y: Legt die Scrollrichtung fest, x ist horizontal, y ist vertikal, der Attributtyp ist ein Boolescher Wert
• scroll-top: Das heißt, der Wert von scroll-top ist der Abstand von oben. Die Scroll-Ansicht, in die Sie es schreiben, wird so weit von oben entfernt sein. Wir können jedoch den Variablenwert festlegen und ihn entsprechend den Bedingungen in js ändern. Dies ist auch der Schlüsselschritt, um eine Links- und Rechtsverknüpfung zu erreichen.
• scroll-into-view: scroll-into-view ist ein ID-Wert. Wir implementieren Links- und Rechtsverknüpfungen durch Scrollen in vertikaler Richtung. Wenn Sie also scroll-into-view festlegen, bedeutet dies, dass der aktuelle Scroll-into-view-Wert das ist, wohin die aktuelle Scroll-Ansicht scrollt.
• style='height: Geben Sie hier die Höhe ein', die Komponente, die Sie zum Scrollen festlegen, muss eine Höhe haben, sonst wird sie nicht gescrollt. Das ist auch leicht zu verstehen. Wenn Sie die Höhe des Rahmens nicht festlegen, weiß die Scroll-Ansicht nicht, wo sie mit dem Gleiten beginnen soll, richtig? Manchmal müssen Sie einen Schieberegler in der Mitte der Seite platzieren (wobei er nur einen Teil der Höhe einnimmt), und manchmal müssen Sie ihn auf der gesamten Fensterhöhe platzieren, sodass die Höhe auch ein notwendiges Attribut ist.
• scroll-with-animation: Wird verwendet, um die Position der Bildlaufleiste für den Animationsübergang festzulegen. Ich habe festgestellt, dass das Löschen dieses Attributs auch normal funktionieren kann. Vielleicht wird es auf der Seite, die ich geschrieben habe, noch nicht verwendet. Ich muss es später verstehen.
• bindscroll: Binden Sie eine Funktion. Da es sich um Scrollen handelt, gibt es keinen Klick-Trigger, sodass eine gebundene Funktion vorhanden ist, um den Funktionsinhalt beim Gleiten auszuführen.
• Nachdem wir nun die Eigenschaften der Komponente herausgefunden haben, können wir mit der Implementierung beginnen. Meine Idee ist es, auf jeder Seite einen Slider einzurichten, der auf beiden Seiten verschoben werden kann. Zunächst wird die linke Seite mit der rechten Seite verknüpft. Die Funktion auf der linken Seite besteht darin, durch Klicken auf die rechte Seite der Klasse zu springen.

<scroll-view class='beiseite' scroll-y='true' style='Höhe:{{asideheight}}px' scroll-with-animation="true" scroll-top='{{itemLeftToTop}}' >
    
    <view wx:for="{{menus}}" wx:key="id" data-id="{{item.id}}" bindtap='tabMenu' class="{{item.id === currentLeftSelected ? 'Menü aktiv' : 'Menü'}}">

    <Ansichts-ID="{{item.id}}">{{item.name}}</Ansicht>
    </Ansicht>

    <Ansichtsklasse="Option" >
    <button id='user_btn' bindtap='getin' >pc</button>
    <Bild-ID='Benutzerbild' src='../../images/index/Benutzeroption.png'></Bild>
    </Ansicht>
    
  </scroll-ansicht>
  <!--Detaillierte Informationen zu jeder Art von Gericht. Sie können auf die Schaltfläche klicken, um die Menge jedes Gerichts hinzuzufügen-->
  
  <scroll-view class="item-content" scroll-y='true' scroll-into-view="{{itemScrollId}}" scroll-with-animation='true' style='Höhe:{{asideheight}}px' bindscroll="right" >
    <Ansicht wx:for="{{Menüs}}" wx:for-index="parentIndex" wx:key="id" id="{{Artikel-ID}}" >
    <view class="item_title">{{item.name}}</view>
    <view class="{{orderCount.num === 0 ? 'box' : 'box aktiv'}}">
      <view class="Artikel" wx:for="{{Artikel.categroy}}" wx:key="categroyid" data-parentIndex='{{parentIndex}}' data-index='{{index}}'>
        <Bild src="{{item.url}}"></Bild>
        <text class="title">{{item.categroy_name}}</text>
        <text class="Preis">￥ {{item.price}} Yuan</text>
        <Ansichtsklasse="Oper">
          <text class="btn_price " bindtap='del' data-id="{{item.id}}" data-parentIndex='{{parentIndex}}' data-index='{{index}}'>-</text>
          <text class="num">{{item.num}}</text>
          <text class="btn_price" bindtap="hinzufügen" data-id="{{item.id}}" data-parentIndex='{{parentIndex}}' data-index="{{index}}">+</text>
        </Ansicht>    
      </Ansicht>
    </Ansicht>
    
    </Ansicht>
</scroll-ansicht>

Sie können sehen, dass ich auf eine Variable für die Höhe verwiesen habe und ihre Implementierung in js wie folgt ist:

wx.getSystemInfo({
      Erfolg: Funktion (res) {
        var Seitenhöhe = res.Fensterhöhe
        var Seitenhöhe1=0;
        dass.setData({
          Seitenhöhe: Seitenhöhe,
          Seitenhöhe1:Seitenhöhe+80
        })
      },
      fail: () => { console.log("Anzeigehöhe konnte nicht ermittelt werden, bitte überprüfen Sie die Netzwerkverbindung") }
    });

Und stellen Sie die Höhe jedes kleinen Gitters links und rechts am Anfang der Funktion ein

const RIGHT_BAR_HEIGHT = 41;
// Die Höhe jeder Unterklasse auf der rechten Seite (fest)
const RIGHT_ITEM_HEIGHT = 122;
// Höhe jeder Klasse auf der linken Seite (fest)
const LEFT_ITEM_HEIGHT = 41;

Die Implementierung auf der linken Seite ist relativ einfach. Es werden zwei Daten gesetzt, currentLeftSelected und itemScrollId. Diesen beiden wird der ID-Wert der aktuell angeklickten Klasse zugewiesen. Ersteres realisiert den Zustand, dass beim Klicken die linke Klasse ausgewählt ist, und der Wert auf der rechten Seite wird itemScrollId zugewiesen. Dieser Wert wird dann dem Scroll-Into-View der rechten Hälfte des vorderen Scroll-Views zugewiesen, sodass beim Klicken auf die linke Seite die rechte Seite springt.

tabMenü: Funktion (e) {
    dies.setData({
      currentLeftSelected: e.target.id || e.target.dataset.id,
      itemScrollId: e.target.id || e.target.dataset.id 
    });
    konsole.log(e);
  },

Die Idee für die rechte Hälfte ist, dass Sie die Höhe jedes Tellers rechts von oben berechnen, in einem Array speichern, dann die aktuelle Gleithöhe beim Gleiten abrufen und sie dann in der in bindscroll gebundenen Funktion vergleichen müssen. Setzen Sie currentLeftSelected links auf die ID der Klasse, die dem Höhenbereich entspricht.

get_eachItemToTop: Funktion () {
    var obj = {};
    var totop = 0;
    var Menüs_Ex = {};
    var das = dies;
    menus_ex = diese.Daten.Menüs;
    konsole.log(menüs_ex);
    für (let i=1;i<menus_ex.length;i++){
      nach oben += (RECHTE_LEISTENHÖHE + menus_ex[i - 1].categroy.length * RECHTE_ELEMENTHÖHE);
      obj[menus_ex[i] ? menus_ex[i].id : 'letztes'] = nach oben;  
    }
    gibt Objekt zurück;
  },
  
  rechts: Funktion (e) {
      für (lass i = 0; i < this.data.menus.length; i++) {
       let left = this.data.eachrightScrollToTop[this.data.menus[i].id]
       let right = this.data.eachrightScrollToTop[this.data.menus[i + 1] ? this.data.menus[i + 1].id : 'letztes']
       wenn (e.detail.scrollTop < rechts && e.detail.scrollTop >= links) {
       dies.setData({
         currentLeftSelected: this.data.menus[i].id,
         itemLeftToTop: LEFT_ITEM_HEIGHT * i
            })
          }
        }
   
    },

Auf diese Weise wird grundsätzlich die Links-Rechts-Kopplung realisiert.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.