微信小程序中下拉刷新及上拉加載怎么實(shí)現(xiàn)-創(chuàng)新互聯(lián)

這篇文章主要介紹“微信小程序中下拉刷新及上拉加載怎么實(shí)現(xiàn)”，在日常操作中，相信很多人在微信小程序中下拉刷新及上拉加載怎么實(shí)現(xiàn)問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”微信小程序中下拉刷新及上拉加載怎么實(shí)現(xiàn)”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)專注于成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站開(kāi)發(fā)。公司秉持“客戶至上,用心服務(wù)”的宗旨,從客戶的利益和觀點(diǎn)出發(fā),讓客戶在網(wǎng)絡(luò)營(yíng)銷中找到自己的駐足之地。尊重和關(guān)懷每一位客戶，用嚴(yán)謹(jǐn)?shù)膽B(tài)度對(duì)待客戶，用專業(yè)的服務(wù)創(chuàng)造價(jià)值，成為客戶值得信賴的朋友，為客戶解除后顧之憂。

1.下拉刷新的概念及應(yīng)用場(chǎng)景。

概念： 下拉刷新是移動(dòng)端更新列表數(shù)據(jù)的交互行為，用戶通過(guò)手指在屏幕上子上而下的滑動(dòng)，可以觸發(fā)頁(yè)面的下拉刷新，更新列表數(shù)據(jù)。

應(yīng)用場(chǎng)景： 在移動(dòng)端，數(shù)據(jù)列表是常見(jiàn)的頁(yè)面效果，更新列表數(shù)據(jù)是最基本的頁(yè)面需求，相比于按鈕刷新，定時(shí)刷新來(lái)說(shuō)，下拉刷新的用戶體驗(yàn)方便友好，已經(jīng)成為移動(dòng)端刷新列表數(shù)據(jù)的很好解決方案。

微信小程序啟動(dòng)下拉刷新：

兩種方式：

1.需要在app.json 的window選項(xiàng)中或頁(yè)面配置中開(kāi)啟enablePullDownRefresh， 但是，一般情況下，推薦在頁(yè)面配置中為需要的頁(yè)面單獨(dú)開(kāi)啟下拉刷新行為。

2.可以通過(guò)wx.startPullDownRefresh() 觸發(fā)下拉刷新，調(diào)用后觸發(fā)下拉刷新動(dòng)畫，效果與用戶手動(dòng)下拉刷新一致。

配置下拉刷新窗口的樣式：

需要在app.json 的window選項(xiàng)中或頁(yè)面配置中修改backbroundColor 和backgroundTextStyle 選項(xiàng)。

backgroundColor: 用來(lái)配置下拉刷新窗口的背景顏色，僅支持16進(jìn)制顏色值。

backgroundTextStyle 用來(lái)配置下拉刷新loading 的樣式，僅支持dark和light

onPullDownRefresh： 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉操作時(shí)執(zhí)行

停止下拉刷新效果：

當(dāng)處理萬(wàn)下拉刷新后，下拉刷新的loading 效果會(huì)一直顯示，不會(huì)主動(dòng)消失，需要手動(dòng)隱藏下拉刷新的loading效果，此時(shí)，跳用wx.stopPullDownRefresh()可以停止當(dāng)前頁(yè)面的下拉刷新。

上拉加載更多

1.上拉加載更多的概念及應(yīng)用場(chǎng)景。

概念： 在移動(dòng)端，隨著手指不斷向上滑動(dòng)，當(dāng)內(nèi)容將要到達(dá)屏幕底部的時(shí)候，頁(yè)面會(huì)隨之不斷的加載后續(xù)內(nèi)容，知道沒(méi)有新內(nèi)容位置，我們稱之為上拉加載更多，上拉加載更多的本質(zhì)就是數(shù)據(jù)的分頁(yè)加載。

應(yīng)用場(chǎng)景： 在移動(dòng)端，列表數(shù)據(jù)的分頁(yè)加載，選的實(shí)現(xiàn)方式就是上拉加載更多。

配置上拉觸底的距離：

可以在app.json的window 選項(xiàng)上或頁(yè)面配置中設(shè)置觸底的距離 onReachBottomDistance 單位為px，默認(rèn)觸底距離為50px。

監(jiān)聽(tīng)上拉觸底事件：onReachBottom() 函數(shù)，可以監(jiān)聽(tīng)用戶在當(dāng)前頁(yè)面的上拉觸底事件，從而實(shí)現(xiàn)上拉加載更多列表數(shù)據(jù)的效果。

到此，關(guān)于“微信小程序中下拉刷新及上拉加載怎么實(shí)現(xiàn)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

網(wǎng)站欄目：微信小程序中下拉刷新及上拉加載怎么實(shí)現(xiàn)-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)源：http://www.muchs.cn/article14/ihede.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、域名注冊(cè)、關(guān)鍵詞優(yōu)化、自適應(yīng)網(wǎng)站、動(dòng)態(tài)網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)