WeChatアプレットは、ボトムアップ部の自動ページ機能を実現します。
2126 ワード
前言
この時間はWeChatウィジェットプロジェクトを引き継いで、これからは小さなプログラムの新しい世界の扉を開きます。ページ番号を使ってページをめくるのは携帯アプリにはもう適用されていません。私たちが日常的に使っているアプリやアプリをめくるのは、基本的には下の方を使って下の方を引く方法です。
考えをまとめる
WeChatウィジェットのリモートコンポーネントがscroll-view(スクロールビュー領域)を提供していることを発見しました。このコンポーネントの中には属性があります。これは私たちが提起した問題を解決し、実現するために使うことができます。ユーザーが最後の要素に滑った時、トリガ関数は、次のページのデータを要求して、展示リストに追加されます。ps:現在のページ番号を保存する変数が必要です。
実現する
wxml:
説明
ここでは最後のページに要求されたかどうかを判断していません。私たちの一般的なバックグラウンドロジックは、現在のページ番号が空であることを要求した時に、前のページが最後のページになったと説明しています。私たちはnextPage関数論で対応する論理判断処理を行うことができます。ここでは展示しません。みんな自分で実現します。言葉を残してください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
この時間は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関数論で対応する論理判断処理を行うことができます。ここでは展示しません。みんな自分で実現します。言葉を残してください。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。