Die Scroll-Ansicht des WeChat-Applets realisiert einen Links-Rechts-Verknüpfungseffekt

Das WeChat-Applet verwendet die Scroll-Ansicht, um eine Links-Rechts-Verknüpfung zu erreichen. Zu Ihrer Information ist der spezifische Inhalt wie folgt

Wenn Sie auf die Schaltfläche links klicken, kann die rechte Seite an die angegebene Position springen

Zunächst müssen Sie auf die Verwendung des vertikalen Scrollens in der Scroll-Ansicht achten. Sie müssen der Scroll-Ansicht eine feste Höhe geben
Zweitens müssen Sie beim Klicken der Scroll-Ansicht, die gescrollt werden soll, Scroll-Into-View hinzufügen. Der Wert sollte die ID des untergeordneten Elements sein und die ID darf nicht mit einer Zahl beginnen.

Scrollen Sie nach rechts und das linke Menü springt zur entsprechenden Position

Die Idee dahinter besteht darin, die Bildlaufdistanz zu ermitteln, wenn der rechte Bildlaufbildschirm scrollt. Berechnen Sie die Distanz, die jedes Modul im rechten Scroll-Bildschirm nach oben erreicht, und fügen Sie es in ein Array ein. Die Scrolldistanz des ersten Moduls entspricht seiner eigenen Höhe, die Scrolldistanz des zweiten Moduls entspricht der Höhe des ersten Moduls plus seiner eigenen Höhe und so weiter. Bestimmen Sie beim Scrollen, an welcher Stelle sich die Scrolldistanz im gespeicherten Array befindet, und leiten Sie daraus den Indexwert ab, der die Bedingungen erfüllt. Durch Ändern des Wertes im Index, der dem linken Menü entspricht, kann eine Links-Rechts-Verknüpfung erreicht werden.
Beim Berechnen der Höhe jedes Moduls müssen Sie wx.createSelectorQuery() verwenden, um das Element abzurufen, das eine Instanz des selectorQuerys-Objekts zurückgibt. Verwenden Sie dann die Methode boundingClientRect(function callback) des zurückgegebenen Knotens, um die Layoutpositionsinformationen des Knotens abzurufen. Nachdem SelectorQuery.exec() ausgeführt wurde, werden die Informationen in der Rückruffunktion zurückgegeben. In diesem Artikel wird die Methode zum Abrufen der Elementhöhe in onload beschrieben.

Implementierungs-Effekt-Diagramm:

Der Hauptcode lautet wie folgt:

index.wxml

<Klasse anzeigen="Container">
  <Ansichtsklasse="Kategorie-links">
    <scroll-view scroll-y="true" style="height:100%">
      <block wx:für="{{Kategorie}}" wx:Schlüssel="id">
       <view class="catgegory-item {{activeId === item.id?'active-item':''}}" data-id="{{item.id}}" bindtap="clickItem">{{item.name}}</view>
      </block>
    </scroll-ansicht>
  </Ansicht>
  <Ansichtsklasse="Kategorie-Rechts">
    <scroll-view scroll-y="true" style="height:100%" scroll-into-view="{{toView}}" scroll-with-animation="ture" bindscroll="scroll">
      <Ansichtsklasse="Kategorie-Detail">
      <block wx:für="{{Inhalt}}" wx:Schlüssel="id">
        <Ansichtsklasse="cateory-main">
          <view class="category-title" id="{{item.id}}">{{item.title}}</view>
          <Klasse anzeigen="Kategorie-Inhalt">
              <view class="content-item" wx:for="{{item.options}}" wx:for-item="i" wx:key="id">
                <Bild src="{{i.src}}"></Bild>
                <text>{{i.text}}</text>                                                      
              </Ansicht>
          </Ansicht>
        </Ansicht> 
      </block>
      </Ansicht>
    </scroll-ansicht>
  </Ansicht>
</Ansicht>

index.js

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

Seite({
  Daten: {
    zum Anzeigen: 'a1',
    Aktive ID: „a1“,
    Kategorie:
      {name: 'Neues Produkt', id: 'a1'},
      { Name: 'Crowdfunding', ID: 'a2' },
      { Name: 'Xiaomi Mobiltelefon', ID: 'a3' },
      { Name: 'Redmi-Telefon', ID: 'a4' },
      { Name: 'Black Shark Game', ID: 'a5' },
      { name: "Handyzubehör", id: 'a6' },
      { Name: 'TV', ID: 'a7'},
      { Name: 'Computer', ID: 'a8' },
    ],
    Inhalt: [
      {
        Titel: '- Neue Produkte -', 
        Optionen: [
          { src: '../../image/redmi.png',id: '001',text: 'redmi8'},
          { src: '../../image/redmi.png', id: '002', text: 'redmi8A' },
          { src: '../../image/redmi.png', id: '003', text: 'Xiaomi 9pro 5G'},
          { src: '../../image/redmi.png', id: '004', text: 'redmi8'},
          { src: '../../image/redmi.png', id: '005',text: 'redmi8' }
        ],
        ID: "a1"
      },
      {
        Titel: '- Crowdfunding -',
        Optionen: [
          { src: '../../image/zhongchou.png', id: '006', text: 'redmi8' },
          { src: '../../image/zhongchou.png', id: '007' ,text: 'redmi8'},
          { src: '../../image/zhongchou.png', id: '008', text: 'redmi8' },
          { src: '../../image/zhongchou.png', id: '009',text: 'redmi8' }
        ],
        ID: "a2"
      },
      {
        Titel: '- Xiaomi Mobiltelefon -',
        Optionen: [
          { src: '../../image/xiaomi.png', id: '006', text: 'redmi8' },
          { src: '../../image/xiaomi.png', id: '007', text: 'redmi8' },
          { src: '../../image/xiaomi.png', id: '008', text: 'redmi8' },
          { src: '../../image/xiaomi.png', id: '009', text: 'redmi8' }
        ],
         ID: "a3"
      },
      {
        Titel: '- Redmi-Mobiltelefon -',
        Optionen: [
          { src: '../../image/hongmi.png', id: '006', text: 'redmi8' },
          { src: '../../image/hongmi.png', id: '007', text: 'redmi8' },
          { src: '../../image/hongmi.png', id: '008', text: 'redmi8' },
          { src: '../../image/hongmi.png', id: '009', text: 'redmi8' }
        ],
        ID: "a4"
      }

    ],
  },
  //Ereignisverarbeitungsfunktion onLoad: function () {
    dies.setData({
      zum Anzeigen: 'a1',
      HöheArr: []
    })
    let query = wx.createSelectorQuery();
    query.selectAll('.catefory-main').boundingClientRect((rect)=> {
      rechteck.fürJedes(ele => {
        dies.Height berechnen(ele.height);
      })
    }).exec();
  },
  Klickelement(e) {
    dies.setData({
      aktiveId: e.currentTarget.dataset.id,
      zuAnzeigen: e.currentTarget.dataset.id
    })
  },
  scrollen(e) {
    Lassen Sie scrollHeight = e.detail.scrollTop;
    let index = this.calculateIndex(this.data.heightArr,scrollHeight);
    dies.setData({
      Aktive ID: „a“ + Index
    })

  },
  // Scrollintervall berechnen calculateHeight(height) {
    wenn(!diese.Daten.HöheArr.Länge) {
      this.data.heightArr.push(Höhe)
    }anders {
      diese.data.heightArr.forEach(ele => {
        Höhe += Element
      })
      this.data.heightArr.push(Höhe);
    }
  },
  // Berechne den links ausgewählten Index calculateIndex(arr, scrollHeight) {
    lass index = '';
    für(lass i =0;i<arr.length;i++) {
      wenn (Scrollhöhe >= 0 und Scrollhöhe < arr[0]) {
        Index = 0;
      }sonst wenn(scrollHeight >= arr[i-1] && scrollHeight < arr[i]){
        Index = i;
      }
    }
    Rückgabeindex+1;
  }
})

index.wxss

/**index.wxss**/
.container {
  Polsterung: 0;
  Breite: 100 %;
  Höhe: 100vh;
  Anzeige: Flex;
  Flex-Richtung: Reihe;
  Elemente ausrichten: Flex-Start;
}
.Kategorie-links {
  Höhe: 100%;
  Breite: 22%;
  Polsterung: 0 20rpx;
  Box-Größe: Rahmenbox;
  Rahmen rechts: 1px durchgezogen #efefef;
}
.Kategorie-Artikel {
  Polsterung: 20rpx 0;
  Schriftgröße: 30rpx;
  Textausrichtung: zentriert;
}
.aktives-Element {
  Farbe: orange;
}
.Kategorie-rechts {
  biegen: 1;
  Höhe: 100%;
}
.Kategorie-Inhalt {
  Anzeige: Raster;
  Rastervorlagenspalten: Wiederholen (automatisches Ausfüllen, 190 rpx);
}
.Kategorie-Titel {
  Textausrichtung: zentriert;
}
.Inhaltselement {
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Polsterung: 20rpx;
  Textausrichtung: zentriert;
  Schriftgröße: 30rpx;
}
.content-item image{
  Breite: 120rpx;
  Höhe: 120rpx;
}

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.

Das könnte Sie auch interessieren:

Das WeChat-Applet realisiert eine Links-Rechts-Verknüpfung
Die Scroll-Ansicht des WeChat-Applets realisiert die Verknüpfung nach links und rechts
Das WeChat-Applet realisiert die Links-Rechts-Verknüpfung des Menüs
Das WeChat-Applet realisiert die Links-Rechts-Verknüpfung von Einkaufsseiten
Das WeChat-Applet realisiert den tatsächlichen Kampfrekord der linken und rechten Verknüpfung

<<: So stellen Sie ein SSL-Zertifikat in einer Windows-Apache-Umgebung bereit, damit die Website https unterstützt

>>: So lösen Sie das Problem der langsamen Geschwindigkeit von MySQL wie bei Fuzzy-Abfragen