目錄
1.? 上拉加載
2.? 下拉刷新
1.? 上拉加載
????????上拉加載是小程序中常見的一種加載方式，當用戶滑動頁面到底部時，會自動加載更多的內(nèi)容，以便用戶繼續(xù)瀏覽小程序中實現(xiàn)上拉加載的方式：
①? 在app.json或者page.json中配置距離頁面底部距離：onReachBottomDistance；默認50px。
②? 在頁面.js中定義onReachBottom事件監(jiān)聽用戶上拉加載。
? ? ? ? 隨機找到或者創(chuàng)建一個空頁面，我這里使用之前的頁面將其中的內(nèi)容注釋掉，找到profile.json文件，編寫代碼：
{
"usingComponents": {},
"onReachBottomDistance":100
}
? ? ? ? 找到profile.scss編寫代碼：
page{
height: 1000px;
}
? ? ? ? 找到profile.js文件，編寫代碼，編寫事件：
Page({
// 監(jiān)聽用戶上拉加載
onReachBottom(){
console.log('監(jiān)聽用戶上拉加載')
}
})
? ? ? ??找到profile.wxml文件，編寫代碼，創(chuàng)建一個數(shù)組：
<view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>
???????? 找到profile.js文件，編寫代碼，在page中添加data數(shù)據(jù)：
Page({
data:{
numList:[1,2,3]
},
// 監(jiān)聽用戶上拉加載
onReachBottom(){
console.log('監(jiān)聽用戶上拉加載')
}
})
? ? ? ? 編譯：
? ? ? ? 找到profile.scss文件注釋掉之前的代碼：
view{
height: 400rpx;
// 彈性布局
display: flex;
// 居中
align-items: center;
justify-content: center;
}
// 奇數(shù)頁
view:nth-child(odd){
background-color: lightskyblue;
}
// 偶數(shù)頁
view:nth-child(even){
background-color: lightslategrey;
}
????????找到profile.scss文件更改page中的代碼：
Page({
data:{
numList: [1, 2, 3]
},
// 監(jiān)聽用戶上拉加載
onReachBottom(){
// console.log('監(jiān)聽用戶上拉加載')
// 產(chǎn)品需求：
// 當用戶上拉需要數(shù)字進行累加
// 當用戶上拉加載希望對數(shù)字進行累加，每次累加三個數(shù)字
// 怎么進行累加
// 獲取目前數(shù)組中最后一項n,n+1,n+2,n+3
// 增加一個提示框
wx.showLoading({
title: '數(shù)據(jù)加載中...',
})
// 設定一個定時器。在定時到期以后執(zhí)行注冊的回調(diào)函數(shù)
setTimeout(() => {
// 獲取數(shù)組的最后一項
const lastNum = this.data.numList[this.data.numList.length-1]
// 需要追加的元素
const newArr = [lastNum + 1,lastNum + 2,lastNum +3]
// 合并初始數(shù)組以及追加后的數(shù)組
// 例如初始數(shù)組[1,2,3]
// 追加后[1,2,3,4,5,6]
this.setData({
numList: [...this.data.numList,...newArr]
})
// 隱藏 loading 提示框
wx.hideLoading()
// 通過更改數(shù)字進行更改延時
},100
)
}
})? ? ? ? 編譯通過滑動屏幕，實現(xiàn)頁面的加載：
2.? 下拉刷新
????????下拉刷新是小程序中常見的一種刷新方式，當用戶下拉頁面時，頁面會自動刷新，以便用戶獲取最新的內(nèi)容。
小程序中實現(xiàn)上拉加載更多的方式：
①? 在 app.json 或者 page.json 中開啟允許下拉，同時可以配置 窗口、loading 樣式等。
②? 在 頁面.js 中定義 onPullDownRefresh 事件監(jiān)聽用戶下拉刷新。
? ? ? ? 找到profile.json文件，更改：
{
"usingComponents": {},
"onReachBottomDistance":100,
"enablePullDownRefresh": true,
"backgroundColor": "#efefef",
"backgroundTextStyle":"dark"
}①? usingComponents: 這里可以列出項目中所需要使用的組件，可以在這里注冊項目自定義的組件，以便在頁面中引用和調(diào)用。
②? onReachBottomDistance: 當頁面上拉到距底部指定距離時觸發(fā) onReachBottom 事件，單位為像素。
③? enablePullDownRefresh: 設置為 true 表示頁面可以下拉刷新，用戶下拉頁面時會觸發(fā)下拉刷新事件。
④? backgroundColor: 設置頁面的背景顏色，這里的 "#efefef" 表示淺灰色。
⑤? backgroundTextStyle: 設置下拉loading的樣式，"dark" 表示深色樣式，適合淺色背景。
? ? ? ? 找到profile.js文件，在page中添加：
// 監(jiān)聽用戶下拉刷新
onPullDownRefresh(){
console.log('監(jiān)聽用戶下拉刷新')
}
? ? ? ? 將其更改為：
// 監(jiān)聽用戶下拉刷新
onPullDownRefresh(){
// console.log('監(jiān)聽用戶下拉刷新')
// 產(chǎn)品需求：
// 當用戶上拉加載更多以后，如果用戶進行下拉刷新
// 需要將數(shù)據(jù)進行重置
this.setData({
numList: [1,2,3]
})
}
? ? ? ? 通過上拉多加幾個數(shù)據(jù)：
? ? ? ? 下拉會發(fā)現(xiàn)數(shù)據(jù)刷新。
? ? ? ? 需要注意一點的是，下拉刷新以后，loading效果有可能不會回彈回去，一次我們可以添加：
// 下拉刷新以后，loading效果有可能不會回彈回去
if (this.data.numList.length === 3){
wx.stopPullDownRefresh()
}
微信小程序開發(fā)_時光の塵的博客-CSDN博客文章來源：http://www.zghlxwxcb.cn/news/detail-849311.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-849311.html
到了這里，關于微信小程序開發(fā)系列（三十二）·如何通過小程序的API實現(xiàn)頁面的上拉加載（onReachBottom事件）和下拉刷新（onPullDownRefresh事件）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
