Beispiel für die Implementierung einer virtuellen Liste im WeChat Mini-Programm

/*
 * @Beschreibung: 
 * @version: 
 * @Autor: shijuwang
 * @Datum: 2021-07-14 16:40:22
 * @LetzteEditoren: shijuwang
 * @LastEditTime: 2021-07-14 17:10:13
 */
//Seitenobjekt
Seite({
  Daten: {
    Liste: [], // alle Daten},
  //Optionen(Objekt)
  onLoad: Funktion (Optionen) {
    dieser.index = 0
    Konstanten arr = [
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },




    ]
    dies.setData({ Liste: arr })
  },

  onReachBottom: Funktion () {
    Konstanten arr = [
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },

    ]
    let { Liste } = diese.Daten
    dies.setData({
      Liste: [...Liste, ...arr]
    })
  },

});


// wxml 
<Klasse anzeigen="Container">
    <Ansicht Klasse="item-list" wx:for="{{list}}">
      <text Klasse="">
          {{item.idx}}
      </text>
    </Ansicht>
</Ansicht>

// wxml
<Klasse anzeigen="Container">
  <block wx:for="{{list}}" wx:for-index="pageNuma">
    <Ansichtsklasse="Artikelliste" wx:for="{{Artikel}}">
      <text class="">{{item.idx}}</text>
    </Ansicht>
  </block>
</Ansicht>
// wx.js
Seite({
  Daten: {
    Liste: [], // alle Daten},
  //Optionen(Objekt)
  onLoad: Funktion (Optionen) {
    dieser.index = 0;
    this.currentIndex = 0; // Aktuelle Seitenzahl pageNuma
    Konstanten arr = [
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },




    ]
    dies.setData({ [`Liste[${this.currentIndex}]`]: arr })
  },

  onReachBottom: Funktion () {
    this.currentIndex++; // Tiefpunkt +1
    Konstanten arr = [
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },

    ]
    dies.setData({
      [`Liste[${this.currentIndex}]`]: arr
    })
  },
}); 

    is.currentIndex = 0; // Aktuelle Seitenzahl pageNum
    this.pageHeight = []; //Jede Bildschirmhöhe speichern this.allList = []; //Alle Daten abrufen this.systemHeight = 0; //Bildschirmhöhe this.visualIndex = []; //Sichtbaren Bereich speichern pageNum

 // wxml
 <view wx:for="{{list}}" wx:for-index="Seitennummer" id="Artikel{{Seitennummer}}">
    <Ansichtsklasse="Artikelliste" wx:for="{{Artikel}}">
      <text class="">{{item.idx}}</text>
    </Ansicht>
  </Ansicht>
 onLoad: Funktion (Optionen) {
    dieser.index = 0;
    this.currentIndex = 0; // Aktuelle Seitenzahl pageNum
    this.pageHeight = []; // Jede Bildschirmhöhe wird gespeichert this.allList = []; // Alle Daten erhalten this.systemHeight = 0; // Bildschirmhöhe const arr = [
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      },
      {
        idx: dies.index++
      }
    ]
    this.setData({ [`list[${this.currentIndex}]`]: arr }, () => {

      this.setPageHeight();
    });
    dies.getSystemInfo();
  },

   // Berechnung der Scroll-Distanz onPageScroll: throttle(function (e) {
    let pageScrollTop = e[0].scrollTop;  
    lass das = dies;
    // Scrollen, um den aktuellen Seitenbildschirm zu berechnen let scrollTop = 0;
    sei aktuellerIndex = dieser.aktuellerIndex;

    für (var i = 0; i < diese.Seitenhöhe.Länge; i++) {
      scrollTop = scrollTop + diese.Seitenhöhe[i];

      wenn (scrollTop > pageScrollTop + this.systemHeight - 50) {
        dies.aktuellerIndex = i;
        Dies.visualIndex = [i - 1, i, i + 1];
        dass.setData({
          visuellerIndex: dieser.visuellerIndex
        })
        brechen;
      }
    }
  },200)

const Drosselklappe = (fn, Intervall) => {
  var enterTime = 0; //Triggerzeit var gapTime = Intervall || 300; //Intervallzeit, wenn kein Intervall überschritten wird, beträgt der Standardwert 300 ms
  Rückgabefunktion () {
    var das = dies;
    var backTime = new Date(); //Der Zeitpunkt, zu dem die Funktion zum ersten Mal zurückkehrt, wird ausgelöst, wenn (backTime - enterTime > gapTime) {
      fn.call(das, Argumente);
      enterTime = backTime; //Wechsle die Zeit des ersten Triggers, um die Zeit des zweiten Triggers zu speichern}
  };
}

<wxs module='filter'>
 var includesList = Funktion(Liste, aktuellerIndex){
   wenn(Liste){
    Rückgabeliste.indexOf(aktuellerIndex) > -1
   }
 }
 module.exports.includesList = enthältListe;
</wxs>
<Klasse anzeigen="Container">
 <view wx:for="{{list}}" wx:for-index="Seitennummer" id="item{{Seitennummer}}" wx:key="Seitennummer">
   <block wx:if="{{filter.includesList(visualIndex,pageNum)}}">
     <Ansichtsklasse="Artikelliste" wx:for="{{Artikel}}">
       <text class="">{{item.idx}}</text>
     </Ansicht>
   </block>
   <block wx:sonst>
     <view class="item-visible" style="height:{{pageHeight[pageNum]}}px"></view>
   </block>
 </Ansicht>
</Ansicht>

  //Monitor anzeigen observePage: function (pageNum) {
    const das = dies;
    const observerView = wx.createIntersectionObserver(this).relativeToViewport({ top: 0, bottom: 0});
    observerView.observe(`#item${pageNum}`, (res) => {
      konsole.log(res,'res');
      wenn (res.intersectionRatio > 0) {
        dass.setData({
          visualIndex: [Seitennummer - 1, Seitennummer, Seitennummer + 1]
        })

      }
    })
  }