微信小程序极致的scroll-view的下拉刷新扩展组件

标签:程序,极致,下拉,刷新,扩展,组件 发布时间:2020年07月09日 点击29

其实原理很简单,和通俗H5以及市面上有的下拉刷新没有分外大的区别,都是基于 touch 手势检测事件来实现下拉刷新的。 touchstart 的时候记录当前触摸点, touchmove 的时候开始计算移动方向和移动距离, touchend 的时候计算是否要进行下拉刷新操作。如图所示:

实现方法

调研了一些实现方法,目前大部分都是通过js计算,然后setData来改变元素的 transform 值实现下拉刷新。考虑到性能题目,此处使用了 wxs 的相应式能力来实现整个计算逻辑,不用通过逻辑层和视图层通讯手机网站制作,直接在视图层进行渲染。详细文档请参考 wxs相应事件 。

这里在 list 组件(由 scroll-view 组成)下抽出了一个 scroll.wxs 作为相应事件的事件处理函数荟萃,源码基本上就在 scroll.wxs 和 list 组件。

scroll.wxs 定义了如下变量和函数:

var moveStartPosition = 0     //开始位置
var moveDistance = 0          //移动距离

var moveRefreshDistance = 60  //达到刷新的阈值
var moveMaxDistance = 100     //最大可滑动距离
var isRefreshMaxDown = false  //是否达到了最大距离, 用来判断是否要震荡提醒

var loading = false           //是否正在loading

... ...

module.exports = {
  touchStart: touchStart, //手指开始触摸事件
  touchMove: touchMove, //手指移动事件
  touchEnd: touchEnd, //手指脱离屏幕事件
  loadingTypeChange: loadingTypeChange, //请求状况转变监听,监听刷新请求开始和请求完成
  triggerRefresh: triggerRefresh //自动触发刷新操作屋面防腐板,比如点击页面上一个按钮,重新刷新list,这就必要用到这个方法
}
复制代码
  • touchStart 和 touchMove 就不用说了,代码解释都很晓畅西安人事考试,通俗的监听移动和处理逻辑。

  • touchEnd 重要是判断移动距离是否达到了阈值,然后根据效果,调用监听实例的 callMethod 方法触发 refreshStart 或者 refreshCancel 方法,这两个方法都是写到 list 组件里面的上海装潢公司,用来触发刷新方法或者取消刷新。

  • loadingTypeChange 方法重要是监听刷新是否完成,以此来触发动画结果。

  • triggerRefresh 通过监听自动触发的变量来处理。假如必要自动触发刷新,则调用 list 组件内部的 forceRefresh 方法,详细使用示例在 index/index/js 的 onLoad 函数有: this.selectComponent('.list').forceRefresh()

  • scroll.wxs 里面还有一个未导出的方法,叫 drawTransitionY ,这个方法重要是由于 ios12对于 transition 动画结果支撑的不好,所以本身写了个Y轴方向的动画( linear 线性的),大佬们可以本身往上添加各种 ease-in-out 结果。

里面详细的实现可以查看代码解释哦~

使用

好了,前面讲了实现的原理和方法,那么在代码里面,应该怎么直接使用呢?如下代码所示:

<!-- 使用示例 -->
<list class="list" refresh-loading="{{refreshLoading}}" loading="{{loading}}" bindrefresh="initList" bindloadmore="loadmore">
  <!-- your code -->
</list>
复制代码
  • refresh-loading 属性用来通过外部loading态来控制刷新动画的开始结束,由于每当转变 refresh-loading 的值时,会将转变同步到组件内的 showRefresh 属性, wxs 通过监听 showRefresh 来处理动画逻辑。

  • loading 属性是上拉加载更多的时候触发的loading态展示,跟刷新无关

  • bindrefresh 是刷新触发时绑定的函数,下拉刷新动画成功开始后触发这个函数

  • bindloadmore 透传 scroll-view 的加载更多方法

当然,源码里面也包含了一个 list-item 组件,这个跟本文没太大关系,是用来做瀑布流长列表内容太多时的内存不足题目解决方案的,详细请看 解决小程序渲染复杂长列表,内存不足题目

手机网站建设