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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
提高网站信任度的技巧
Oct 17 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
String.prototype实现的一些javascript函数介绍
Nov 22 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
vue移动端的左右滑动事件详解
Jun 17 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跨时区(UTC时间)应用解决方案
2013/01/11 PHP
使用PHP编写的SVN类
2013/07/18 PHP
PHP实现货币换算的方法
2014/11/29 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
js跨域访问示例(客户端/服务端)
2014/05/19 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python 字典中取值的两种方法小结
2018/08/02 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
蜜蜂引路教学反思
2014/02/04 职场文书
食品安全宣传标语
2014/06/07 职场文书
上党课的心得体会
2014/09/02 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle