WeChatアプレットは、ボトムアップ部の自動ページ機能を実現します。


前言
この時間はWeChatウィジェットプロジェクトを引き継いで、これからは小さなプログラムの新しい世界の扉を開きます。ページ番号を使ってページをめくるのは携帯アプリにはもう適用されていません。私たちが日常的に使っているアプリやアプリをめくるのは、基本的には下の方を使って下の方を引く方法です。
考えをまとめる
WeChatウィジェットのリモートコンポーネントがscroll-view(スクロールビュー領域)を提供していることを発見しました。このコンポーネントの中には属性があります。これは私たちが提起した問題を解決し、実現するために使うことができます。ユーザーが最後の要素に滑った時、トリガ関数は、次のページのデータを要求して、展示リストに追加されます。ps:現在のページ番号を保存する変数が必要です。

実現する
wxml:

<scroll-view class="scroll_view" scroll-y bindscrolltolower="nextPage">
 <view style="height:100vh">
  <block wx:for="{{lists}}" wx:for-index="index" wx:for-item="item" wx:key="unique">
   <view style="height:10vh;border:1rpx solid red">
    {{item}}
   </view>
  </block>
 </view>
</scroll-view>
wxss:

.scroll_view{
 height:100vh;
}
js:

Page({

 data: {
  lists: [],
  page: 1
 },
 //        
 nextPage: function () {
  let new_lists = [];
  let page = this.data.page;
  let startindex = page * 10 + 1;
  console.log(" " + page + "      ,   " + (page + 1) + " ");
  page += 1;
  //    
  for (let i = startindex; i <= startindex + 9; i++) {
   new_lists.push(i);
  }
  this.setData({ lists: this.data.lists.concat(new_lists), page: page });
 },
 onLoad: function (options) {
  let lists = [];
  //    
  for (let i = this.data.page; i <= this.data.page + 9; i++) {
   lists.push(i)
  }
  this.setData({ lists: lists, });
 },
})
効果:

説明
ここでは最後のページに要求されたかどうかを判断していません。私たちの一般的なバックグラウンドロジックは、現在のページ番号が空であることを要求した時に、前のページが最後のページになったと説明しています。私たちはnextPage関数論で対応する論理判断処理を行うことができます。ここでは展示しません。みんな自分で実現します。言葉を残してください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。