一.自帶刷新  

1.在pages.json 上進(jìn)行定義

2.在頁(yè)面上監(jiān)聽(tīng)下拉動(dòng)作進(jìn)行需要的操作

ps：一定要手動(dòng)停止刷新，否則會(huì)一直刷新

自帶刷新的優(yōu)點(diǎn)：相對(duì)穩(wěn)定，寫(xiě)法相對(duì)簡(jiǎn)單

自帶刷新的缺點(diǎn)：樣式上固定的 所以不能滿足全部人的需求

樣式：

二.使用srcoll-view下拉刷新

組件代碼：scroll-view: uniapp使用scorll-view實(shí)現(xiàn)下拉刷新

子組件內(nèi)容：

定義數(shù)據(jù)：

頁(yè)面加載初始化：

定義方法：

父組件內(nèi)容

1. 引入組件

2.方法

使用srcoll-view刷新優(yōu)點(diǎn)：刷新的樣式可以自定義相對(duì)靈活

使用srcoll-view刷新缺點(diǎn)：srcoll-view相對(duì)不穩(wěn)定偶爾會(huì)出現(xiàn)下拉不刷新的情況，scroll-view 不適合放長(zhǎng)列表，有性能問(wèn)題

三.使用mescroll-nui下拉刷新

組件官網(wǎng)：mescroll -- 精致的下拉刷新和上拉加載js框架

mescroll的uni版本, 是專門用在uni-app的下拉刷新和上拉加載的組件, 支持一套代碼編譯到iOS、Android、H5、小程序等多個(gè)平臺(tái)，本身這個(gè)框架就是已經(jīng)比較完善了的也是很實(shí)用，還是挺推薦使用的。

1.引入mescroll 

使用HBuilderX導(dǎo)入插件，【wxs+renderjs實(shí)現(xiàn)】高性能的下拉刷新上拉加載組件 - DCloud 插件市場(chǎng)

2.頁(yè)面上使用

頁(yè)面標(biāo)簽

標(biāo)簽上參數(shù)說(shuō)明：

• @init ：mescroll組件初始化完成的回調(diào)
• :down：下拉參數(shù)配置
• @down ：下拉刷新的回調(diào) 
• :up：上拉參數(shù)配置
• :fixed ：是否通過(guò)fixed定位來(lái)固定mescroll-uni的高度
• ps：有其他需求的可以查看官網(wǎng)有更詳細(xì)的參數(shù)配置說(shuō)明

引入混入

3.基本參數(shù) 

4.加載樣式

（我使用的時(shí)候發(fā)現(xiàn)mescroll-nui樣式的話只能使用文字，所以我在插件的基礎(chǔ)上添加的一些頁(yè)面樣式）

 通過(guò)判斷刷新的狀態(tài)在頁(yè)面上添加了三個(gè)刷新的狀態(tài)以及刷新中的加載動(dòng)畫(huà)

5.使用mescroll-nui的注意事項(xiàng)

down和up的配置項(xiàng)不是響應(yīng)式的, 如果要?jiǎng)討B(tài)修改配置, 需要通過(guò) this.mescroll.optDown和this.mescroll.optUp 動(dòng)態(tài)修改

總結(jié)

到此這篇關(guān)于uniapp實(shí)現(xiàn)下拉刷新的幾種方式小結(jié)的文章就介紹到這了,更多相關(guān)uniapp下拉刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論