UIPullRefreshDrop

论坛示例

为帮助用户更好更快的使用插件,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

概述

随着用户对 App 使用体验的要求不断提升,传统的下拉刷新动画和模式已经无法满足用户挑剔的视觉体验。为满足广大开发者对下拉刷新功能的需求,我推出了最新最炫的下拉刷新插件助您提升 App 逼格。

本插件采用最炫酷的水滴效果来实现刷新功能。

下拉刷新简介

下拉刷新是指在一个可上下拖动查看内容的支持弹动功能的窗体(frame、window)中,用户通过下拉触发刷新数据事件从而加载数据刷新页面的过程。

此过程可拆分为四个组成部分:

  • 一,下拉过程
  • 二,下拉高度达到一定阈值后触发加载事件
  • 三,加载状态
  • 四,数据加载完成后刷新页面并停止加载状态(恢复常态)

插件概述

UIPullRefreshDrop 插件对引擎新推出的下拉刷新接口进行了一层封装,App 可以通过此插件来实现水滴效果的下拉刷新功能。使用此插件,在用户下拉时本插件会随下拉高度而相应地拉伸水滴;当下拉高度达到一定阈值后触发加载事件:进入加载状态时,刷新提示图标开始动画,同时将下拉刷新事件回发给前端。前端得到下拉刷新事件后开始加载数据;数据加载完毕,调用接口 api.refreshHeaderLoadDone 以停止加载状态;

插件使用攻略

对于 YonBuilder移动开发 平台上的普通插件,在相应接口调用前需要先 require 该插件,但由于本插件是基于引擎下拉刷新功能扩展的插件,所以本插件使用方法比较特殊。可以不必 require 插件,改为在 config.xml 文件内配置插件。

config.xml 文件配置示例如下:

<preference name="customRefreshHeader" value="UIPullRefreshDrop"/>

config.xml 配置后,则本插件为全局对象,可以在任意可弹动的窗体(frame、window)中调用 api.setCustomRefreshHeaderInfo 接口设置该下拉刷新样式,以及开始、停止刷新加载状态(api.refreshHeaderLoading、api.refreshHeaderLoadDone)。

若想在不同的 window 或 frame 使用不同的下拉刷新插件,开发者可以在 window 或 frame 打开时传入参数 customRefreshHeader:'下拉刷新模的块名',以指定该窗体的下拉刷新插件。如:

{
api.openFrame({
            name: 'frm_main',
            url: './html/main.html',
            customRefreshHeader: 'UIPullRefreshDrop',
            bounces: true,
            rect: {
                x: offset.l,
                y: offset.t + offset.h,
                w: offset.w,
                h: bodyHeight - offset.h
            }
        });
}

注意:本插件无接口,插件的所有功能都通过 api 对象的相应接口实现

功能接口

setCustomRefreshHeaderInfo

配置下拉刷新样式

api.setCustomRefreshHeaderInfo({params}, callback())

params

  • 类型:JSON 对象类型
  • 描述:启用下拉刷新及其样式的配置
  • 内部字段:
{
    bgColor: '#C0C0C0',       // (可选项)字符串类型;下拉刷新的背景设置,支持 rgb、rgba、#,该背景大小同当前 window 或 frame 的宽高;默认:#C0C0C0
    dropColor:'#9BA2AC',      // (可选项) 字符串类型;水滴的颜色,支持rgb、rgba、#,默认:#9BA2AC
    finishedText:'刷新完成'    // (可选项) 字符串类型;刷新结束的文字显示,默认:'刷新完成'
}

callback()

当用户下拉的高度达到阈值(本下拉插件的阈值为60)后抬起拖动手指 触发刷新事件,插件将该事件回调给前端。

示例代码

api.setCustomRefreshHeaderInfo({
        bgColor: '#C0C0C0',
        dropColor:'#9BA2AC',
   }, function() {
       setTimeout(function(){
          api.refreshHeaderLoadDone()
   }, 3000);
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

refreshHeaderLoading

手动开始下拉刷新的加载状态,下拉刷新状态亦可通过用户手势下拉到阈值自动触发

api.refreshHeaderLoading()

示例代码

api.refreshHeaderLoading();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

refreshHeaderLoadDone

手动停止下拉刷新的加载状态

api.refreshHeaderLoadDone()

示例代码

api.refreshHeaderLoadDone();

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

是否仍需要帮助? 请保持联络!
最后更新于 2024/12/2