uniapp實(shí)現(xiàn)下拉刷新的幾種方式小結(jié)
一.自帶刷新
1.在pages.json 上進(jìn)行定義
2.在頁面上監(jiān)聽下拉動(dòng)作進(jìn)行需要的操作
ps：一定要手動(dòng)停止刷新，否則會(huì)一直刷新
自帶刷新的優(yōu)點(diǎn)：相對(duì)穩(wěn)定，寫法相對(duì)簡(jiǎn)單
自帶刷新的缺點(diǎn)：樣式上固定的 所以不能滿足全部人的需求
樣式：
二.使用srcoll-view下拉刷新
組件代碼：scroll-view: uniapp使用scorll-view實(shí)現(xiàn)下拉刷新
子組件內(nèi)容：
定義數(shù)據(jù)：
頁面加載初始化：
定義方法：
父組件內(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 不適合放長列表，有性能問題
三.使用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.頁面上使用
頁面標(biāo)簽
標(biāo)簽上參數(shù)說明：
- @init ：mescroll組件初始化完成的回調(diào)
- :down：下拉參數(shù)配置
- @down ：下拉刷新的回調(diào)
- :up：上拉參數(shù)配置
- :fixed ：是否通過fixed定位來固定mescroll-uni的高度
- ps：有其他需求的可以查看官網(wǎng)有更詳細(xì)的參數(shù)配置說明
引入混入
3.基本參數(shù)
4.加載樣式
（我使用的時(shí)候發(fā)現(xiàn)mescroll-nui樣式的話只能使用文字，所以我在插件的基礎(chǔ)上添加的一些頁面樣式）
通過判斷刷新的狀態(tài)在頁面上添加了三個(gè)刷新的狀態(tài)以及刷新中的加載動(dòng)畫
5.使用mescroll-nui的注意事項(xiàng)
down和up的配置項(xiàng)不是響應(yīng)式的, 如果要?jiǎng)討B(tài)修改配置, 需要通過 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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
原生js實(shí)現(xiàn)表單的正則驗(yàn)證（驗(yàn)證通過后才可提交）
這篇文章主要給大家介紹了關(guān)于如何利用原生js實(shí)現(xiàn)表單的正則驗(yàn)證，所有驗(yàn)證都通過后提交按鈕才可用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片實(shí)例代碼
大家都知道Swiper(Swiper master)是目前應(yīng)用較廣泛的移動(dòng)端網(wǎng)頁觸摸內(nèi)容滑動(dòng)js插件。下面這篇文章主要給大家介紹了在JS中利用swiper實(shí)現(xiàn)3d翻轉(zhuǎn)幻燈片的相關(guān)資料，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
prototype.js簡(jiǎn)單實(shí)現(xiàn)ajax功能示例
這篇文章主要介紹了prototype.js簡(jiǎn)單實(shí)現(xiàn)ajax功能,結(jié)合實(shí)例形式分析了prototype.js前臺(tái)實(shí)現(xiàn)ajax與后臺(tái)struts的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
JavaScript檢測(cè)瀏覽器cookie是否已經(jīng)啟動(dòng)的方法
這篇文章主要介紹了JavaScript檢測(cè)瀏覽器cookie是否已經(jīng)啟動(dòng)的方法,實(shí)例分析了javascript操作cookie的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
本篇文章主要介紹了template.js前端模板引擎使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了微信小程序使用video組件播放視頻功能,結(jié)合實(shí)例形式分析了video組件播放本地mp4小視頻的具體實(shí)現(xiàn)技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
微信小程序通過一個(gè)json實(shí)現(xiàn)分享朋友圈圖片
這篇文章主要給大家介紹了關(guān)于微信小程序通過一個(gè)json實(shí)現(xiàn)分享朋友圈圖片的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JS實(shí)現(xiàn)瀏覽器狀態(tài)欄文字從右向左彈出效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)瀏覽器狀態(tài)欄文字從右向左彈出效果,涉及JavaScript結(jié)合時(shí)間函數(shù)遍歷字符串及動(dòng)態(tài)改變狀態(tài)欄顯示效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
js捕獲鼠標(biāo)右鍵菜單中的粘帖事件實(shí)現(xiàn)代碼
突發(fā)奇想比如點(diǎn)擊菜單中的粘帖后事件如何捕獲，如下圖所示,用的jQuery中的paste事件，如想獲得粘帖文本要使用setTimeout控制下時(shí)間，感興趣的朋友可以參考下2013-04-04
微信小程序使用form表單獲取輸入框數(shù)據(jù)的實(shí)例代碼
這篇文章主要介紹了微信小程序使用form表單獲取輸入框數(shù)據(jù)的實(shí)例代碼，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05