微信小程序下拉刷新和上拉加载
效果圖
?
微信小程序實現下拉刷新和上拉加載有2中方法
1 用系統自帶的 個人感覺特別簡單
2 使用scroll-view? 實現,
scroll-view 里面有2個屬性是滑動到頂部以及到底部如下
其實就是滑動到頂部和底部的時候請求網絡,就行了,
?
第一種方法說明:
在json里面先聲明這個界面要用到刷新
{
"enablePullDownRefresh": true,
"backgroundColor": "#e5e5e5",
"onReachBottomDistance": 50
}
這里我設置了一個背景顏色,不然的話白色看到效果
在xml中定義一個list
<view class="content">
<view class="list" wx:for="{{dataList}}" wx:key="list">
{{item}}</view>
</view>
?
js里面
調用onPullDownRefresh()和onReachBottom() 里面添加網絡請求即可,
注意加載是從底部add進去的,用push 方法即可,當然還有其他的方法自己可以百度下
下面給出模擬的,
Page({
data: {
dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
count: 0
},
onPullDownRefresh() {
var self = this;
setTimeout(() => {
// 模擬請求數據，并渲染
var arr = self.data.dataList, max = Math.max(...arr);
for (var i = max + 1; i <= max + 3; ++i) {
arr.unshift(i);
}
self.setData({ dataList: arr });
// 數據成功后，停止下拉刷新
wx.stopPullDownRefresh();
}, 1000);
},
onReachBottom() {
var arr = this.data.dataList, max = Math.max(...arr);
if (this.data.count < 3) {
for (var i = max + 1; i <= max + 5; ++i) {
arr.push(i);
}
this.setData({
dataList: arr,
count: ++this.data.count
});
} else {
wx.showToast({
title: '沒有更多數據了！',
})
}
}
})
這樣是實現了刷新和加載了....
?
demo index里面是系統的,refresh是用scroll-view實現的,如果想切換在json里面切換顯示的界面就行,我沒有添加點擊跳轉的按鈕
?
給出demo地址吧
demo地址,如果幫助了您希望給一個star
?
?
?
總結
以上是生活随笔為你收集整理的微信小程序下拉刷新和上拉加载的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 输卵管炎会导致不孕症吗
- 下一篇： 微信小程序缓存