uniapp中怎么使用scrpll-view組件實(shí)現(xiàn)下拉刷新？下面本篇文章給大家介紹一下uniapp使用scroll-view自定義下拉刷新的方法，希望對(duì)大家有所幫助！

uniapp下拉刷新

uniapp的下拉刷新有兩個(gè)方法, 一種是整體的下拉刷新, 使用頁(yè)面生命周期函數(shù)onPullDownRefresh; 另外一種是局部的下拉刷新也叫自定義下拉刷新, 使用scrpll-view組件中的自定義下拉刷新事件。

一.整個(gè)頁(yè)面的刷新(onPullDownRefresh)

在 js 中定義 onPullDownRefresh 處理函數(shù)（和onLoad等生命周期函數(shù)同級(jí)），監(jiān)聽(tīng)該頁(yè)面用戶下拉刷新事件?！竟俜轿臋n】這里不再做過(guò)多介紹！今天的重點(diǎn)在下面

二.自定義頁(yè)面刷新(scroll-view)

組件中遇到的問(wèn)題

• 觸發(fā)不了下拉（原因排查）

  1、scroll-view組件外部沒(méi)有用view包裹. 官網(wǎng)雖然沒(méi)有說(shuō)這個(gè)問(wèn)題, 但是如果外部沒(méi)有一個(gè)view單獨(dú)包裹著這個(gè)組件, 就沒(méi)有辦法觸發(fā)scroll-view組件中的事件。

  2、scroll-view沒(méi)有設(shè)置固定高, 在css中設(shè)置height, 設(shè)置多高就在多高的區(qū)域展現(xiàn). 比如設(shè)置高為50vh(100vh為滿屏), 則組件里邊的內(nèi)容只會(huì)在半屏內(nèi)上下滾動(dòng),不會(huì)觸發(fā)page的滾動(dòng)條只會(huì)觸發(fā)scroll-view的滾動(dòng)條. 如果高度不好給確定值, 可以使用scss(lang='scss')中的calc計(jì)算, 例子中有體現(xiàn).(注意使用calc計(jì)算時(shí), -左右一定要有空格)。

  3、設(shè)置高為百分比的話也不能觸發(fā)下拉. 高可以使用max-hight, 不能使用min-hight。

  4、沒(méi)有設(shè)置scroll-y

• 沒(méi)有滾動(dòng)到頂部觸發(fā)下拉, 而是在可視頁(yè)面中觸發(fā)下拉

  官方默認(rèn)無(wú)論page的滾動(dòng)條在哪個(gè)位置, 只要在scroll-view頁(yè)面上下拉都會(huì)觸發(fā)下拉函數(shù), 這樣用戶體驗(yàn)非常差. 可以使用@scroll滾動(dòng)時(shí)觸發(fā)的函數(shù)來(lái)獲取scroll-view滾動(dòng)條的位置, 進(jìn)而來(lái)控制refresher-enabled開(kāi)啟和關(guān)閉自定義下拉刷新. 當(dāng)scroll-view的滾動(dòng)條滾動(dòng)到頂部時(shí), 使refresher-enabled為true, 其他條件為false。

直接上代碼看： html:

<template> <view>   <scroll-view     show-scrollbar="true"     style="height: 300px"     scroll-y="true"     :refresher-enabled="isOpenRefresh"     :refresher-triggered="triggered"     :refresher-threshold="100"     refresher-background="gray"     @refresherpulling="onPulling"     @refresherrefresh="onRefresh"     @refresherrestore="onRestore"     @refresherabort="onAbort"     @scroll="onScroll"   >   <view v-if="!isOpenRefresh">別拉了，沒(méi)有