WeChatアプレットは、ページングを実行してデータをロードし、プルダウンを実行してさらにロードし、プルアップして更新します。データはforループで読み込まれ、データソースは配列オブジェクトです。データの次のページをロードするとき、データの次のページを現在の配列の後ろに置きます。
コードは次のとおりです
。wxmlコード
<scroll-view class="scrollview">
<block wx:for="{{list}}" wx:key="index">
<view class="item">{{item.title}} ({{item.author}})</view>
</block>
</scroll-view>
<view class="fixed-bottom" bindtap="loadMore">加载更多</view>
jsコード
page({
/**
* 页面的初始数据
*/
data: {
pageIndex: 1, //列表初始页
list: [], //存放所有数据
},
//加载初始数据；单独写个方法，而不直接写在onLoad里面，是因为如果要做下拉刷新操作的话，只需要在触发下拉刷新操作后，再调用一下这个方法就可以了。
loadInitData() {
var that = this
var pageIndex = 1
var msg = '加载第' + pageIndex + '页'
wx.showLoading({
title: msg,
})
wx.request({
url: 'xxx.com/Content/test-data/data.json',
method: 'GET',
header: { 'content-type': 'application/json' },
success: function (res) {
console.log(res)
that.setData({
pageIndex: pageIndex,
list: res.data.data
})
console.log(that.data.list)
},
fail: function (res) { },
complete: function (res) {
wx.hideLoading()
},
})
},
//加载更多
loadMore() {
let that = this,
pageIndex = that.data.pageIndex; // 获取当前页码
pageIndex += 1; //加载当前页的下一页
let msg = '加载第' + pageIndex + '页';
wx.showLoading({
title: msg,
})
wx.request({
url: 'xxx.com/Content/test-data/data.json',
header: { 'content-type': 'application/json' },
method: 'GET',
success: function (res) {
//将新一页的数据添加到原数据后面
let data = res.data.data;
let originList = that.data.list;
let newList = originList.concat(data)
console.log(newList)
that.setData({
pageIndex: pageIndex,
list: newList
})
},
fail: function (res) { },
complete: function (res) {
wx.hideLoading()
},
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
var that = this;
that.loadInitData();
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log('触发下拉刷新')
var that = this
that.loadInitData()
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log('触发上拉加载')
var that = this
that.loadMore()
}
})
上記の実装は、データ量が少ないページでは問題になりませんが、データが大きい場合は、1回の操作で小さなプログラムsetDataによって設定されるデータサイズが1024KBを超えてはならないため、パフォーマンスの問題が発生します。
したがって、コードを最適化し、各ページから要求されたデータの参照を新しい配列listArrコレクションに入れるために、いくつかの改善を行う必要があります。listArr [0]はデータの最初のページを格納し、listArr [1]はデータの2ページ目を格納します。新しいページをリクエストするには、setDataのデータがWeChatアプレットによって制限された長さを超えないように、データのセットを更新するだけで済みます。このメソッドは、loadInitDataの実行時に最初にlistArrをクリアして、新しいデータが元のデータと競合しないようにします。次に、このデータのページをlistArr [0]に配置します。この実装方法のデータ構造は2次元配列[[{…}、{…}]、[{…}、{…}]、…]なので、wxmlのリスト構造を変更する場合は注意が必要です。コードは次のとおりです
。wxml
<scroll-view class="scrollview">
<block wx:for="{{listArr}}" wx:key="index" wx:for-item="caption">
<view wx:for="{{caption}}" wx:key="index">
<view class="item">{{item.title}} ({{item.author}})</view>
</view>
</block>
</scroll-view>
js
Page({
/**
* 页面的初始数据
*/
data: {
listArr:[], //数据集合
pageIndex:1, //展示的当前页码
pageSize: 40, //每页加载的数据量（使用的json数据就是40条，实际工作根据需求来）
pageCount:3, //总页数(假设的，实际应该是根据后台返回的数据)
},
//加载初始页数据
loadInitData(){
var that = this
var pageIndex = 1
if (that.data.pageIndex === 1){
wx.showLoading({
title: '加载中...',
})
}
// 刷新时，清空listArr，防止新数据与原数据冲突
that.setData({
listArr: []
})
//发送请求
wx.request({
url: 'xxx.com/Content/test-data/data.json',
// data: {
// pageIndex: that.data.pageIndex ,
// pageSize: that.data.pageSize
// },
header: { 'content-type': 'application/json' },
method: 'GET',
success: function (res) {
console.log(res)
var tempList = res.data.data
that.setData({
pageIndex: 1,
['listArr['+ (pageIndex-1) +']'] : tempList //动态修改数组某一项的值，需要加中括号
})
console.log(that.data.listArr)
},
fail: function (res) { },
complete: function (res) {
wx.hideLoading();
},
})
},
//加载更多
loadMore(){
var that = this
var pageIndex = that.data.pageIndex
pageIndex += 1
wx.showLoading({
title: '加载第'+ pageIndex +'页',
})
wx.request({
url: 'xxx.com/Content/test-data/data.json',
header: { 'content-type': 'application/json' },
method: 'GET',
success: function (res) {
//将新一页的数据添加到原数据后面
let newList = res.data.data;
that.setData({
pageIndex: pageIndex,
['listArr[' + (pageIndex - 1) + ']'] : newList
})
console.log(that.data.listArr)
},
fail: function (res) { },
complete: function (res) {
wx.hideLoading()
},
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.loadInitData()
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
let that = this
that.loadInitData()
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
let that= this,
pageIndex = that.data.pageIndex,
pageCount = that.data.pageCount;
//当页面小于总页数时加载下页面
if(pageIndex < pageCount){
that.loadMore()
}else{
wx.showToast({
title: '没有更多数据了',
})
}
}
})
追加の注意点：
問題：小さなプログラムでプルアップロードプルダウンリフレッシュ関数を書き換えましたが、トリガーできません;
解決策：このコードスニペットをjson構成ファイルに（グローバルまたは現在のページに）追加してください
{「enablePullDownRefresh」：true}
問題：プルダウンリフレッシュが発生することがありますが、これらの3つのドットの読み込みアニメーションが表示されません。その理由は、これらの3つのポイントのデフォルトの色は白であり、現在の背景色も白であるためです。
解決策：
1.背景色を変更し、wxssにコードを追加します
page {background-color：#ebebeb; }
2.ロードアイコンのデフォルトの色を変更し、json設定ファイルにコードを追加します
{「backgroundTextStyle」：「暗い」}
参考資料：https://www.jianshu.com/p/066c062845e9
