WeChatミニプログラムでの仮想リストの実装例

/*
 * @説明: 
 * @バージョン: 
 * @著者: shijuwang
 * @日付: 2021-07-14 16:40:22
 * @LastEditors: shijuwang
 * @最終編集時間: 2021-07-14 17:10:13
 */
//ページオブジェクト
ページ（{
  データ： {
    リスト: [], // すべてのデータ},
  //オプション(オブジェクト)
  onLoad: 関数 (オプション) {
    this.index = 0
    定数arr = [
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },




    ]
    this.setData({ リスト: arr })
  },

  onReachBottom: 関数 () {
    定数arr = [
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },

    ]
    {リスト} = this.dataとします
    this.setData({
      リスト: [...リスト、...arr]
    })
  },

});


// wxml 
<ビュークラス="コンテナ">
    <view class="item-list" wx:for="{{list}}">
      <テキストクラス="">
          {{item.idx}}
      </テキスト>
    </ビュー>
</ビュー>

// wxml
<ビュークラス="コンテナ">
  <block wx:for="{{list}}" wx:for-index="pageNuma">
    <view class="item-list" wx:for="{{item}}">
      <text class="">{{item.idx}}</text>
    </ビュー>
  </ブロック>
</ビュー>
// wx.js
ページ（{
  データ： {
    リスト: [], // すべてのデータ},
  //オプション(オブジェクト)
  onLoad: 関数 (オプション) {
    this.index = 0;
    this.currentIndex = 0; // 現在のページ番号 pageNuma
    定数arr = [
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },




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

  onReachBottom: 関数 () {
    this.currentIndex++; // 一番下まで +1
    定数arr = [
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },

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

    is.currentIndex = 0; // 現在のページ番号 pageNum
    this.pageHeight = []; //各画面の高さを保存 this.allList = []; //すべてのデータを取得 this.systemHeight = 0; //画面の高さ this.visualIndex = []; //表示領域pageNumを保存

 // wxml
 <view wx:for="{{list}}" wx:for-index="pageNum" id="item{{pageNum}}">
    <view class="item-list" wx:for="{{item}}">
      <text class="">{{item.idx}}</text>
    </ビュー>
  </ビュー>
 onLoad: 関数 (オプション) {
    this.index = 0;
    this.currentIndex = 0; // 現在のページ番号 pageNum
    this.pageHeight = []; // 各画面の高さが保存されます this.allList = []; // すべてのデータが取得されます this.systemHeight = 0; // 画面の高さ const arr = [
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      },
      {
        idx: this.index++
      }
    ]
    this.setData({ [`list[${this.currentIndex}]`]: arr }, () => {

      ページの高さを設定します。
    });
    システム情報を取得します。
  },

   // スクロール距離の計算 onPageScroll: throttle(function (e) {
    pageScrollTop = e[0].scrollTopとします。  
    that = this とする;
    // 現在のページ画面を計算するためにスクロールします。let scrollTop = 0;
    currentIndex を this.currentIndex とします。

    (var i = 0; i < this.pageHeight.length; i++) {
      scrollTop = scrollTop + this.pageHeight[i];

      （スクロールトップ＞ページスクロールトップ＋this.systemHeight - 50）{
        this.currentIndex = i;
        this.visualIndex = [i - 1, i, i + 1];
        that.setData({
          ビジュアルインデックス: this.visualIndex
        })
        壊す;
      }
    }
  },200)

const スロットル = (fn, 間隔) => {
  var enterTime = 0; //トリガー時間 var gapTime = interval || 300; //間隔時間。間隔が経過しない場合、デフォルトは300msです。
  関数を返す（）{
    var that = this;
    var backTime = new Date(); //関数が最初に返される時刻がトリガーされます if (backTime - enterTime > gapTime) {
      fn.call(that, 引数);
      enterTime = backTime; // 最初のトリガーの時間を割り当てて、2 番目のトリガーの時間を保存します}
  };
}

<wxs モジュール = 'フィルター'>
 var includeList = function(リスト、現在のインデックス){
   if(リスト){
    list.indexOf(currentIndex) > -1 を返す
   }
 }
 module.exports.includesList = includeList;
</wxs>
<ビュークラス="コンテナ">
 <view wx:for="{{list}}" wx:for-index="pageNum" id="item{{pageNum}}" wx:key="pageNum">
   <block wx:if="{{filter.includesList(visualIndex,pageNum)}}">
     <view class="item-list" wx:for="{{item}}">
       <text class="">{{item.idx}}</text>
     </ビュー>
   </ブロック>
   <ブロック wx:else>
     <view class="item-visible" style="height:{{pageHeight[pageNum]}}px"></view>
   </ブロック>
 </ビュー>
</ビュー>

  //ビューモニター observePage: function (pageNum) {
    const that = this;
    const observerView = wx.createIntersectionObserver(this).relativeToViewport({ top: 0, bottom: 0});
    observerView.observe(`#item${pageNum}`, (res) => {
      コンソールにログ出力します。
      （res.intersectionRatio > 0）の場合{
        that.setData({
          ビジュアルインデックス: [ページ番号 - 1、ページ番号、ページ番号 + 1]
        })

      }
    })
  }