当前位置: 首页 > 编程笔记 >

iOS编写下拉刷新控件

郭通
2023-03-14
本文向大家介绍iOS编写下拉刷新控件,包括了iOS编写下拉刷新控件的使用技巧和注意事项,需要的朋友参考一下

现在iOS里有很多成熟的下拉刷新控件,比如MJRefresh,SVPullToRefresh

我这里参考了SV的写法,但是回调用的是代理,没有用block,个人感觉用代理更简洁一点

下拉刷新的基本原理

在scrollview的上面和下面分别添加一个view,上面的是下拉的时候展示下拉动画的headerView,下面的是上拉加载更多的时候展示动画的footerView

这里的headerView和footerView都是自己添加的,和tableView自己的header,footer不一样

headerView是添加在scrollView的最上面的,设置frame的时候是origin.y是负数

当下拉达到条件就触发刷新,同时更改scrollview的contentInsert.top值,以使手指松开之后headerView仍然可以露出来

刷新结束之后,停止headerView上面的动画,然后把contentInsert的值改回去

footerView是添加在最下方的,frame.origin.y是scrollview的contentSize.height

在上拉到一定程度之后就更改scrollview的contentInsert,使footerView可以露出来,加载结束之后就改回去

如何写下拉刷新

写下拉刷新一般都是给scrollview写一个类别,添加一个新的方法,来把headerView和footerView添加到scrollview上面

给scrollview声明一个headerView类型的属性(如何给类别添加属性)

然后给scrollview的contentoffset属性添加监听者,这个监听者就是headerView

这样,在scrollview滑动的时候,就可以监听到滑动的情况,并根据数据来决定是否刷新和时候改变scrollview.contentInsert.y

然后再写一个停止刷新的方法,用来停止刷新动画和更改scrollview.contentInsert.y

这样scrollview的扩展就写完了,然后就要写自定义的headerView

headerView的动画是根据需要些的,数据来源就是监听到的contentoffset

在scrollViewDidScroll方法里来处理监听到的值

这里使用了一个枚举类型来记录刷新状态,从而控制动画

虽然原理简单,但是实践起来遇到了很多困难,有技术上的,也有逻辑上的,心力交瘁,才搞出来一个小

Demo:https://github.com/chebaoGitHub/CBGeneralRefreshView

footerView同理

结语:

写这个控件最大的收获就是加深了对set get方法的理解,对scrollview的理解,对category的理解

但是这里仍然有一个bug

在下拉达到条件,headerView开始动画,设置contentInsert之后,正在回弹的scrollview会出现抖动,手指滑的越快抖动越厉害,不知道为什么,现在还没有解决,希望大家可以有好的解决方法,大家共同学习。

 类似资料:
  • ap.allowPullDownRefresh(OPTION | allow) 下拉刷新开关。可直接传入一个布尔值作为 OPTION.allow 参数。 OPTION 参数说明 名称 类型 必填 描述 allow Boolean 否 是否允许下拉刷新,默认 true 代码示例 <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayj

  • 下拉刷新是一个特别的组件,可以用来初始化页面内容的刷新。 下拉刷新的demo <header class="bar bar-nav"> <h1 class='title'>下拉刷新</h1> </header> <!-- content应该拥有"pull-to-refresh-content"类,表示启用下拉刷新 --> <div class="content pull-to-re

  • 下拉刷新是一个特别的组件,可以用来初始化页面内容的刷新。 下拉刷新的HTML布局结构 让我们来看一下如何把下拉刷新组件集成到页面中: <div class="page"> <!-- Page content应该拥有"pull-to-refresh-content"类 --> <div class="page-content pull-to-refresh-content" data-ptr

  • Page.onPullDownRefresh() 在 Page 中定义 onPullDownRefresh 处理函数,监听该页面用户下拉刷新事件 jd.startPullDownRefresh(Object object) 开始下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致 OBJECT 参数说明: 参数 类型 必填 说明 success Function 否 接口调用成功的回调函数

  • 主要内容:实例在加载新数据的时候,我们需要实现下拉刷新效果,代码如下: 实例 HTML 代码 JavaScript 代码 item.json 文件数据: 尝试一下 » 效果如下所示:

  • 介绍 用于提供下拉刷新的交互操作。 引入 import { createApp } from 'vue'; import { PullRefresh } from 'vant'; const app = createApp(); app.use(PullRefresh); 代码演示 基础用法 下拉刷新时会触发 refresh 事件,在事件的回调函数中可以进行同步或异步操作,操作完成后将 v-m