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

uniapp下拉刷新

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

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

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

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

組件中遇到的問題

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

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

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

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

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

• 沒有滾動到頂部觸發(fā)下拉, 而是在可視頁面中觸發(fā)下拉

  官方默認無論page的滾動條在哪個位置, 只要在scroll-view頁面上下拉都會觸發(fā)下拉函數(shù), 這樣用戶體驗非常差. 可以使用@scroll滾動時觸發(fā)的函數(shù)來獲取scroll-view滾動條的位置, 進而來控制refresher-enabled開啟和關(guān)閉自定義下拉刷新. 當scroll-view的滾動條滾動到頂部時, 使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">別拉了，沒有