uniapp局部的下拉刷新以及组件出现的问题

落日映苍穹つ 2022-12-11 05:22 727阅读 0赞

# 局部的下拉刷新 #

### 文章目录 ###

*  局部的下拉刷新
 *   *  一.scroll-view实例
     *  二.属性说明:
     *  三.出现的问题

## 一.scroll-view实例 ##

> 可滚动视图区域, 用于区域滚动. 区域滚动的性能不及页面滚动

<scroll-view class="scroll" scroll-y="true" :refresher-enabled='refresherEnabled' @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" :refresher-triggered="triggered">
    	<view></view>
    </scroll-view>

data () { 
        return { 
          // 开启下拉
          refresherEnabled: true,
          //
          triggered: false,
        }
    }
    methods: { 
        //下拉过程的函数
        onPulling (e) { 
        },
        //松手后执行下拉事件的函数
        onRefresh () { 
          if (this._freshing) return;
          this.triggered = 'restore';
          setTimeout(() => { 
            this.triggered = false;
            this._freshing = false;
          }, 1000)
          //获取数据的函数
          this.current = 1
          this.getData()
        },
        //开始结束下拉的函数
        onRestore () { 
          this.triggered = 'restore'; // 关闭动画
        },
        //结束下拉函数
        onAbort () {  },
    }

## 二.属性说明: ##

<table> 
 <thead> 
  <tr> 
   <th align="left">属性名</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">scroll-x</td> 
   <td align="left">Boolean</td> 
   <td align="left">false</td> 
   <td align="left">允许横向滚动</td> 
  </tr> 
  <tr> 
   <td align="left">scroll-y</td> 
   <td align="left">Boolean</td> 
   <td align="left">false</td> 
   <td align="left">允许纵向滚动</td> 
  </tr> 
  <tr> 
   <td align="left">upper-threshold</td> 
   <td align="left">Number</td> 
   <td align="left">50</td> 
   <td align="left">距顶部/左边多远时（单位px），触发 scrolltoupper 事件</td> 
  </tr> 
  <tr> 
   <td align="left">lower-threshold</td> 
   <td align="left">Number</td> 
   <td align="left">50</td> 
   <td align="left">距底部/右边多远时（单位px），触发 scrolltolower 事件</td> 
  </tr> 
  <tr> 
   <td align="left">scroll-top</td> 
   <td align="left">Number</td> 
   <td align="left"></td> 
   <td align="left">设置竖向滚动条位置</td> 
  </tr> 
  <tr> 
   <td align="left">scroll-left</td> 
   <td align="left">Number</td> 
   <td align="left"></td> 
   <td align="left">设置横向滚动条位置</td> 
  </tr> 
  <tr> 
   <td align="left">scroll-into-view</td> 
   <td align="left">String</td> 
   <td align="left"></td> 
   <td align="left">值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素</td> 
  </tr> 
  <tr> 
   <td align="left">scroll-with-animation</td> 
   <td align="left">Boolean</td> 
   <td align="left">false</td> 
   <td align="left">在设置滚动条位置时使用动画过渡</td> 
  </tr> 
  <tr> 
   <td align="left">enable-back-to-top</td> 
   <td align="left">Boolean</td> 
   <td align="left">false</td> 
   <td align="left">iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向</td> 
  </tr> 
  <tr> 
   <td align="left">show-scrollbar</td> 
   <td align="left">Boolean</td> 
   <td align="left">false</td> 
   <td align="left">控制是否出现滚动条</td> 
  </tr> 
  <tr> 
   <td align="left">refresher-enabled</td> 
   <td align="left">Boolean</td> 
   <td align="left">false</td> 
   <td align="left">开启自定义下拉刷新</td> 
  </tr> 
  <tr> 
   <td align="left">refresher-threshold</td> 
   <td align="left">number</td> 
   <td align="left">45</td> 
   <td align="left">设置自定义下拉刷新阈值</td> 
  </tr> 
  <tr> 
   <td align="left">refresher-default-style</td> 
   <td align="left">string</td> 
   <td align="left">“black”</td> 
   <td align="left">设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式</td> 
  </tr> 
  <tr> 
   <td align="left">refresher-background</td> 
   <td align="left">string</td> 
   <td align="left">“#FFF”</td> 
   <td align="left">设置自定义下拉刷新区域背景颜色</td> 
  </tr> 
  <tr> 
   <td align="left">refresher-triggered</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发</td> 
  </tr> 
  <tr> 
   <td align="left">enable-flex</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。</td> 
  </tr> 
  <tr> 
   <td align="left">scroll-anchoring</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。</td> 
  </tr> 
  <tr> 
   <td align="left">@scrolltoupper</td> 
   <td align="left">EventHandle</td> 
   <td align="left"></td> 
   <td align="left">滚动到顶部/左边，会触发 scrolltoupper 事件</td> 
  </tr> 
  <tr> 
   <td align="left">@scrolltolower</td> 
   <td align="left">EventHandle</td> 
   <td align="left"></td> 
   <td align="left">滚动到底部/右边，会触发 scrolltolower 事件</td> 
  </tr> 
  <tr> 
   <td align="left">@scroll</td> 
   <td align="left">EventHandle</td> 
   <td align="left"></td> 
   <td align="left">滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}</td> 
  </tr> 
  <tr> 
   <td align="left">@refresherpulling</td> 
   <td align="left">EventHandle</td> 
   <td align="left"></td> 
   <td align="left">自定义下拉刷新控件被下拉</td> 
  </tr> 
  <tr> 
   <td align="left">@refresherrefresh</td> 
   <td align="left">EventHandle</td> 
   <td align="left"></td> 
   <td align="left">自定义下拉刷新被触发</td> 
  </tr> 
  <tr> 
   <td align="left">@refresherrestore</td> 
   <td align="left">EventHandle</td> 
   <td align="left"></td> 
   <td align="left">自定义下拉刷新被复位</td> 
  </tr> 
  <tr> 
   <td align="left">@refresherabort</td> 
   <td align="left">EventHandle</td> 
   <td align="left"></td> 
   <td align="left">自定义下拉刷新被中止</td> 
  </tr> 
 </tbody> 
</table>

## 三.出现的问题 ##

1.  高度问题
    
    使用时要固定高度, 不然不会出现效果. 可以使用js计算高度, 也可以使用样式来自动拉伸，如使用flex布局.  
    用其他布局要注意, 脱离文档流时默认没有高, 也不会出现效果.
2.  下拉不回弹
    
        this.triggered = 'restore';
    
    triggered变量是来控制关闭下拉动作的, 可以在onRefresh这个函数中关闭
3.  刚打开就执行下拉
    
    在官方文档的例子中, 在onLoad()中的内容删除即可
    
        onLoad() { 
            this._freshing = false;
            setTimeout(() => { 
                this.triggered = true;
            }, 1000)
        },