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

uniapp下拉刷新

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

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

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

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

組件中遇到的問題

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

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

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

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

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

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

  官方默認(rèn)無論page的滾動(dòng)條在哪個(gè)位置, 只要在scroll-view頁面上下拉都會觸發(fā)下拉函數(shù), 這樣用戶體驗(yàn)非常差. 可以使用@scroll滾動(dòng)時(shí)觸發(fā)的函數(shù)來獲取scroll-view滾動(dòng)條的位置, 進(jìn)而來控制refresher-enabled開啟和關(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">別拉了，沒有