在小程序中onLoad生命鉤子只在頁面創(chuàng)建時調(diào)用一次，在做navigateTo頁面跳轉(zhuǎn)后，返回上級頁面，由于navigateTo跳轉(zhuǎn)只是隱藏了當(dāng)前頁面，因此返回上一級頁面時onLoad生命鉤子不會再次執(zhí)行，這樣帶來的好處是頁面能快速展示出來，但是onLoad中的請求數(shù)據(jù)不會實時更新，這時候就需要一個下拉刷新的操作來幫助用手動更新頁面數(shù)據(jù)，接下來這篇文章將會介紹小程序中實現(xiàn)下拉刷新的三種方式enablePullDownRefreshenablePullDownRefresh是最容易實現(xiàn)下拉刷新的方法，在json文件中將enablePullDownRefresh設(shè)置為true，在Page中監(jiān)聽onPullDownRefresh事件即可，支持點擊頂部標(biāo)題欄回到頂部，自定義標(biāo)題欄時會失效，還可以通過直接調(diào)用wx.startPullDownRefresh()觸發(fā)下拉刷新事件，產(chǎn)生下拉刷新動畫，處理完下拉刷新中的數(shù)據(jù)更新后調(diào)用wx.stopPullDownRefresh()結(jié)束動畫即可。
這種形式的下拉刷新的優(yōu)點很明顯就是簡單，沒有限制，但是缺點也同樣明顯：
下拉動畫太過簡單，交互不夠優(yōu)雅且不能自定義下拉動畫當(dāng)自定義標(biāo)題欄時，fixed定位，在Android下標(biāo)題欄也會被一起下拉scroll-viewscroll-view是官方的一個滾動視圖組件，使用很簡單，想要設(shè)置上拉刷新代碼如下：
content想要利用scroll-view實現(xiàn)上拉刷新，需要注意：
一定要給scroll-view設(shè)置固定高度，否則監(jiān)聽事件不會觸發(fā)設(shè)置縱向滾動scroll-yscroll-view內(nèi)的內(nèi)容高度一定要比scroll-view高度要高，否則無法產(chǎn)生縱向滾動，就無法觸發(fā)監(jiān)聽事件scroll-view缺點：
由于iOS有橡皮筋效果，因此最終效果會與Android有一定的差異剛打開頁面時上拉是無法觸發(fā)上拉監(jiān)聽事件，需要先向下滾動，觸發(fā)滾動，然后再上拉滾動才能觸發(fā)監(jiān)聽事件當(dāng)有自定義頭部時，scroll-view需要一個高度計算，減去頭部高度scroll-view優(yōu)點：
可以自定義加載動畫代碼相對簡單相對enablePullDownRefresh，scroll-view對滾動列表控制更加方便：
scroll-into-view：
滾動到指定元素enable-back-to-top：
iOS點擊頂部狀態(tài)欄、安卓雙擊標(biāo)題欄時，滾動條返回頂部，只支持豎向，且當(dāng)自定義標(biāo)題欄后就會失效官方并不推薦使用scroll-view做下拉刷新，官方文檔上有這樣一個tip自定義下拉刷新自定義下拉刷新最主要希望解決的問題還是在Android使用enablePullDownRefresh時fixed定位的標(biāo)題欄或?qū)Ш綑跁幌吕膯栴}，同時兩端在下拉刷新時的動畫保持一致，其實實現(xiàn)起來并不難，接下來就看看具體實現(xiàn):wxml:{
{
state === 0 ? '
下拉刷新'
: state === 1? '
松開刷新'
: '
刷新中'
}
}
這個文件定義組件的模版，有一個滾動view包裹，綁定了touch事件，里面包含下拉刷新時的動畫，和一個slot，slot用于插入滾動列表的內(nèi)容wxss:.animation {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 150rpx;
margin-bottom: -150rpx;
background-color: #fff;
}
.loading {
width: 30rpx;
height: 30rpx;
border:6rpx solid #333333;
border-bottom: #cccccc 6rpx solid;
border-radius: 50%;
animation:load 1.1s infinite linear;
}
@keyframes load{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.tip {
margin-left: 10rpx;
color: #666;
}
樣式文件這沒什么特別的js:let lastY = 0 // 上一次滾動的位置 let scale = 750 / wx.getSystemInfoSync().windowWidth // rpx轉(zhuǎn)化比例 Component({
options: {
multipleSlots: true }
, data: {
scrollTop: 0, translateHeight: 0, // 平移距離 state: -1 }
, properties: {
// 觸發(fā)下拉刷新的距離 upperDistance: {
type: Number, value: 150 }
}
, methods: {
// 監(jiān)聽滾動，獲取scrollTop onPageScroll (e) {
this.data.scrollTop = e.scrollTop }
, touchStart (e) {
lastY = e.touches[0].clientY }
, touchMove (e) {
let clientY = e.touches[0].clientY let offset = clientY - lastY if (this.data.scrollTop > 0 || offset this.data.upperDistance) {
this.data.state = 1 }
this.setData({
translateHeight: this.data.translateHeight, state: this.data.state }
) }
, touchEnd (e) {
if (this.data.translateHeight - this.data.scrollTop * scale > this.data.upperDistance) {
this.setData({
translateHeight: 150 }
) this.triggerEvent('
scrolltoupper'
) this.setData({
state: 2 }
) }
else if (this.data.scrollTop this.stopRefresh() }
}
, // 停止刷新 stopRefresh () {
this.setData({
translateHeight: 0, state: -1 }
, () => {
wx.pageScrollTo({
scrollTop: 0, duration: 0 }
) }
) }
}
}
)這個下拉刷新組件最重要的是控制下拉刷新的時機，代碼體現(xiàn)就是定義了一個upperDistance，下拉刷新的距離來判斷是否執(zhí)行刷新。
手指滑動時，獲取滑動距離，translateHeight累加用于展示，在touchEnd事件中判斷滑動距離是否達(dá)到設(shè)定值，達(dá)到設(shè)定值就發(fā)送scrolltoupper事件，在父組件中監(jiān)聽即可，否則停止刷新。
使用：

{
{
item}
}
Page({
data: {
list: [] }
, onLoad: function () {
this.refreshScroll = this.selectComponent('
#refreshScroll'
) for (let i = 0;
i i++) {
this.data.list.push(i) }
this.setData({
list: this.data.list }
) }
, onPageScroll (e) {
this.refreshScroll.onPageScroll(e) }
, onReachBottom () {
wx.showLoading({
title: '
onReachBottom'
}
) setTimeout(() => {
wx.hideLoading() }
, 1000) }
, refresh: function (e) {
setTimeout(() => {
this.refreshScroll.stopRefresh() }
, 1000) }
}
)在使用時關(guān)鍵是要將頁面中onPageScroll中獲取的值傳遞下去，然后bindscrolltoupper監(jiān)聽scrolltoupper事件，執(zhí)行刷新操作然后再調(diào)用stopRefresh停止刷新，下來看真機上的測試效果：
iOS:Android:在真機測試時，表現(xiàn)都還不錯，當(dāng)然了，這只是自定義下拉刷新的一個簡單組件例子，如果需要用于到實際項目，可能還需要自己去完善，畢竟不同的人應(yīng)用的場景不同，這里只是給出了一個思路而已總結(jié)本篇文章介紹了小程序下拉刷新時的三種方法，前兩種都是小程序官方提供的，最后一種是個人的思考總結(jié)，寫的也比較簡單，想要項目應(yīng)用，還需要自己完善，只希望為大家做自定義下拉刷新提供一個思路。
推薦教程：
《微信小程序》以上就是小程序的下拉刷新問題的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
小程序 前端本文轉(zhuǎn)載于：
segmentfault，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
小程序二維碼怎么轉(zhuǎn)換成鏈接？
下一篇：
用mpvue開發(fā)微信小程序基礎(chǔ)知識相關(guān)文章相關(guān)視頻微信小程序之調(diào)用微信授權(quán)窗口微信小程序開發(fā)中var that =this的基本...微信小程序wx.request請求數(shù)據(jù)報錯微信小程序加載失敗是什么原因？小程序的下拉刷新問題初識微信小程序(2)初識微信小程序(3)初識微信小程序(4) [溫州做小程序]