uniapp中怎么使用scrpll-view组件实现下拉刷新

uniapp中怎么使用scrpll-view组件实现下拉刷新？下面本篇文章给大家介绍一下uniapp使用scroll-view自定义下拉刷新的方法，希望对大家有所帮助！

uniapp下拉刷新

uniapp的下拉刷新有两个方法, 一种是整体的下拉刷新, 使用页面生命周期函数onPullDownRefresh; 另外一种是局部的下拉刷新也叫自定义下拉刷新, 使用scrpll-view组件中的自定义下拉刷新事件。

一.整个页面的刷新(onPullDownRefresh)

在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。【官方文档】这里不再做过多介绍！今天的重点在下面

二.自定义页面刷新(scroll-view)

组件中遇到的问题

• 触发不了下拉（原因排查）

  1、scroll-view组件外部没有用view包裹. 官网虽然没有说这个问题, 但是如果外部没有一个view单独包裹着这个组件, 就没有办法触发scroll-view组件中的事件。

  2、scroll-view没有设置固定高, 在css中设置height, 设置多高就在多高的区域展现. 比如设置高为50vh(100vh为满屏), 则组件里边的内容只会在半屏内上下滚动,不会触发page的滚动条只会触发scroll-view的滚动条. 如果高度不好给确定值, 可以使用scss(lang='scss')中的calc计算, 例子中有体现.(注意使用calc计算时, -左右一定要有空格)。

  3、设置高为百分比的话也不能触发下拉. 高可以使用max-hight, 不能使用min-hight。

  4、没有设置scroll-y

• 没有滚动到顶部触发下拉, 而是在可视页面中触发下拉

  官方默认无论page的滚动条在哪个位置, 只要在scroll-view页面上下拉都会触发下拉函数, 这样用户体验非常差. 可以使用@scroll滚动时触发的函数来获取scroll-view滚动条的位置, 进而来控制refresher-enabled开启和关闭自定义下拉刷新. 当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">别拉了，没有