xmlplus组件设计系列之下拉刷新(PullRefresh)(6)


Posted in Javascript onMay 03, 2017

“下拉刷新”由著名设计师 Loren Brichter 设计,并应用于 Twitter 第三方应用 Tweetie 中。2010年4月,Twitter 收购 Tweetie 开发商 Atebits 后,该专利归 Twitter 所有。这一章我们就来看看如何实现一个简单的下拉刷新组件。

xmlplus组件设计系列之下拉刷新(PullRefresh)(6)

目标组件分析

和前面在设计组件时的做法一样,我们先想想看最终的成品组件是如何使用的,这需要点想像力。下拉刷新组件看成一个容器组件是合理的,用户可以对容器的内容进行下拉操作。如果用户完成了完整的下拉触发操作,该组件应该会有下拉完成的事件反馈,假定这个事件名为 ready。根据以上的分析,我们很有可能得到下面的一个该组件的应用示例。

Example1: {
 xml: `<PullRefresh id='example'>
    <h1>Twitter</h1>
    <h2>Loren Brichter</h2>
   </PullRefresh>`,
 fun: function (sys, items, opts) {
  sys.example.on("ready", () => console.log("ready"));
 }
}

示例中的使用方式是非常简洁的,但我们还漏了一点。如果你用过一些新闻客户端,在某些情况下,此客户端会自动触发下拉刷新操作。比如,刚进入客户端页面或者由于软件推送机制产生的被动列表更新,这都将导致客户端下拉刷新操作的触发。所以如上的 PullRefresh 组件还应该提供一个触发自动刷新的操作接口。好了,下面是加入下拉刷新接口的应用示例。

Example2: {
 xml: `<PullRefresh id='example'>
    <h1>Twitter</h1>
    <h2>Loren Brichter</h2>
    <button id='refresh'>click</button>
   </PullRefresh>`,
 fun: function (sys, items, opts) {
  sys.example.on("ready", () => console.log("ready"));
  sys.refresh.on("click", items.example.refresh);
 }
}

基本框架

现在让我们把目光转移到下拉刷新组件的内部,看看该如何去实现。观察文章开始部分的大图,很自然地我们可以将整个组件划分为三个子组件,如下面的 XML 文档所示。

<div id="refresh">
 <Status id="status"/>
 <div id="content"></div>
</div>

外围 div 元素包含两个子组件:其中一个是状态指示条,用于显示“下拉刷新”、“松开刷新”、“加载中...”以及“刷新成功”四个状态提示,这里暂时使用未定义的 Status 组件替代;另一个 div 元素用于容纳下拉刷新组件的包含内容。到现在,大概可以想得出该组件的工作逻辑了,于是我们可以给出下面的一个基本的组件框架。

PullRefresh: {
 css: "#refresh { position: relative; height: 100%;...}",
 xml: `<div id="refresh">
   <Status id="status"/>
   <div id="content"/>
   </div>`,
 map: { appendTo: "content" },
 fun: function (sys, items, opts) {
  sys.content.on("touchstart", e => {
   // 侦听 touchmove 和 touchend事件
  });
  function touchmove(e) {
   // 1 处理状态条与内容内面跟随触点移动
   // 2 根据触点移动的距离显示相当的状态条内容
  }
  function touchend(e) {
   // 1 移除 touchmove 和 touchend 事件
   // 2 根据触点移动的距离决定返回原始状态或者进入刷新状态并派发事件
  }
 }
}

状态条的实现

如前面提到的,状态条组件包含四个状态提示,并且每一时刻仅显示一个状态。对于状态的切换,这里会先用到我们下一章将讲到的路由组件 ViewStack,这里仅需要了解如何使用即可。组件 ViewStack 对外只显示子级的一个子组件,同时侦听一个 switch 事件,该事件的派发者携带了一个切换到的目标对象的名称,也就是 ID。该组件根据这个 ID 来切换到目标视图。下面是状态条组件的完整实现。

Status: {
 css: "#statusbar { height: 2.5em; line-height: 2.5em; text-align: center; }",
 xml: <ViewStack id="statusbar">
   <span id="pull">下拉刷新</span>
   <span id="ready">松开刷新</span>
   <span id="loading">加载中...</span>
   <span id="success">刷新成功</span>
   </ViewStack>,
 fun: function (sys, items, opts) {
  var stat = "pull";
  function getValue() {
   return stat;
  }
  function setValue(value) {
   sys.statusbar.trigger("switch", stat = value);
  }
  return Object.defineProperty({}, "value", { get: getValue, set: setValue });
 }
}

该组件提供一个 value 接口用户设置与获取组件的显示状态。父级组件可根据不同的时机调用该接口。

最终实现

有了上面的储备,让我们来填充完下拉刷新组件的细节。下拉刷新过程中会涉及到动画,对于动画目前一般有两种选择,可以使用 JQuery 动画函数,也可以是 css3,这需要看各人喜好了。这里我们选择使用 css3 来实现。为清晰起见,下面的实现仅给出函数部分,其余部分同上。

PullRefresh: {
 fun: function (sys, items, opts) {
  var startY, height = sys.status.height();
  sys.content.on("stouchstart", e => {
   if (items.status.value == "pull") {
    startY = e.y;
    sys.content.on("touchmove", touchmove).on("touchend", touchend);
    sys.content.css("transition", "").prev().css("transition", "");
   }
  });
  function touchmove(e) {
   var offset = e.y - startY;
   if ( offset > 0 ) {
    sys.content.css("top", offset + "px"); 
    sys.status.css("top", (offset - height) + "px");
    items.status(offset > height ? "ready" : "pull");
   }
  }
  function touchend (e) {
   var offset = e.y - startY;
   sys.content.off("touchmove").off("touchend");
   sys.content.css("transition", "all 0.3s ease-in 0s").prev().css("transition", "all 0.3s ease-in 0s");
   if ( offset < height ) {
    sys.content.css("top", "0").prev().css("top", -height + "px");
   } else {
    items.status.value = "release";
    sys.refresh.once("complete", complete);
    sys.content.css("top", height + "px").prev().css("top", "0").trigger("ready");
   }
  }
  function complete() {
   items.status.value = "message";
   setTimeout(() => {
    sys.content.css("top", "0").prev().css("top", -height + "px");
    sys.content.once("webkitTransitionEnd", e => items.status.value = "pull");
   }, 300);
  }
 }
}

对于稍微有点复杂的组件,需要注意组件的组织归类,尽量把具有相近功能的组件放在一起。为了便于叙述,上述所列出的组件示意总把它们视作是同一目录,这一点读者应该能看出来。

本系列文章基于 xmlplus 框架。如果你对 xmlplus 没有多少了解,可以访问 www.xmlplus.cn。这里有详尽的入门文档可供参考。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
javascript 判断一个对象为数组的方法
May 03 #Javascript
深入理解node.js之path模块
May 03 #Javascript
判断颜色是否合法的正则表达式(详解)
May 03 #Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 #Javascript
ES6中参数的默认值语法介绍
May 03 #Javascript
Express之get,pos请求参数的获取
May 02 #Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 #Javascript
You might like
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
JavaScript触发器详解
2007/03/10 Javascript
js 判断 enter 事件
2009/02/12 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
postman传递当前时间戳实例详解
2019/09/14 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
大型活动策划方案
2014/01/12 职场文书
宿舍违规检讨书
2014/01/12 职场文书
效能监察建议书
2014/05/19 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
入党个人总结范文
2015/03/02 职场文书
致接力运动员加油稿
2015/07/21 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书