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

<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
//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**/
.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;
}