uniapp區域性的下拉重新整理以及元件出現的問題

2021-10-20 20:53:44 字數 1268 閱讀 6735

文章目錄

區域性的下拉重新整理

一.scroll-view例項

二.屬性說明:

三.出現的問題

一.scroll-view例項

可滾動檢視區域, 用於區域滾動. 區域滾動的效能不及頁面滾動
="scroll"

scroll-y=

"true"

:refresher-enabled=

'refresherenabled'

@refresherpulling

="onpulling"

@refresherrefresh

="onrefresh"

@refresherrestore

="onrestore"

@refresherabort

="onabort"

:refresher-triggered=

"triggered"

>

<

/view>

<

/scroll-view>

data ()}

methods:

,//鬆手後執行下拉事件的函式

onrefresh (),

1000

)//獲取資料的函式

this

.current =

1this

.getdata()

},//開始結束下拉的函式

onrestore (),

//結束下拉函式

onabort (),

}

三.出現的問題

1.高度問題

使用時要固定高度, 不然不會出現效果. 可以使用js計算高度, 也可以使用樣式來自動拉伸,如使用flex布局.

用其他布局要注意, 脫離文件流時預設沒有高, 也不會出現效果.

2.下拉不回彈

this

.triggered =

'restore'

;

triggered變數是來控制關閉下拉動作的, 可以在onrefresh這個函式中關閉

3.剛開啟就執行下拉

在官方文件的例子中, 在onload()中的內容刪除即可

onload()

,1000)}

,

uniapp 下拉重新整理

1 需要在pages.json裡,找到的當前頁面的pages節點,並在 style 選項中開啟enablepulldownrefresh。2 當處理完資料重新整理後,uni.stoppulldownrefresh可以停止當前頁面的下拉重新整理。在js中定義onpulldownrefresh處理函式 ...

uni app 下拉重新整理

官方文件 在 js 中定義 onpulldownrefresh 處理函式 和onload等生命週期函式同級 監聽該頁面使用者下拉重新整理事件。開始下拉重新整理,呼叫後觸發下拉重新整理動畫,效果與使用者手動下拉重新整理一致。object 引數說明 引數名型別 必填說明 success function...

uni app做下拉重新整理

onload option 1000 毫秒 uni.startpulldownrefresh this getbargindata 呼叫這個介面 console.log res success 返回引數說明 這裡表示當進入頁面的時候就開始執行下拉重新整理動畫 onpulldownrefresh th...