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

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

目标组件分析

和前面在设计组件时的做法一样,我们先想想看最终的成品组件是如何使用的,这需要点想像力。下拉刷新组件看成一个容器组件是合理的,用户可以对容器的内容进行下拉操作。如果用户完成了完整的下拉触发操作,该组件应该会有下拉完成的事件反馈,假定这个事件名为 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。这里有详尽的入门文档可供参考。

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

(0)

相关推荐

  • xmlplus组件设计系列之选项卡(Tabbar)(5)

    这一章将设计一个选项卡组件,选项卡组件在手持设备上用的比较多,下面是一个示意图: 选项卡组成 在具体实现之前,想像一下目标组件是如何使用的,对于设计会有莫大的帮助.通过观察,可以将选项卡组件分为容器部分和子项部分,正如下面的 XML 结构所展示的. <Tabbar id="tabbar"> <TabItem id="home" label="首页"/> <TabItem id="setting"

  • xmlplus组件设计系列之按钮(2)

    除了图标以外,按钮也许是最简单的组件了,现在来看看如何定义按钮组件. 使用原生按钮组件 在 xmlplus 中,HTML 元素也以组件的方式存在.所以,你可以直接通过使用 button 标签或者 input 标签来使用按钮组件.如下示例所示: Example: { xml: "<div id='example'>\ <button>Default</button>\ <input type='submit'>Primary</input>

  • xmlplus组件设计系列之分隔框(DividedBox)(8)

    分隔框(DividedBox)是一种布局类组件,可以分为两类,其中一类叫水平分隔框(HDividedBox),另一类叫垂直分隔框(VDividedBox).水平分隔框会将其子级分为两列,而垂直分隔框则会将其子级分为两行.列与列之间以及行与行之间一般都会有一条可以拖动的用以改变子级组件大小的分隔条.下面仅以垂直分隔框为例来介绍此类组件是如何设计以及实现的. 成品组件用例 按照以往的设计经验,我们可以先写出想像中的成品组件用例,这将有助于我们后续的进一步的设计与实现.垂直分隔框既然是布局类的组件,那

  • xmlplus组件设计系列之路由(ViewStack)(7)

    在浏览器端,对路由的理解一般是根据不同的 URL 完成页面的切换.在服务器端,则是根据不同的 URL 请求回馈相关的页面.在本章,我们广义的组件路由的定义:根据接收到的不同命令,组件对象呈现出不同的子级页面.在这里将介绍与路由相关的一个组件,即视图栈 ViewStack. 视图栈初步 该组件在<文档>部分的最后一个章节<延迟实例化>已经出现过了.这里将对一些细节部分进行解读.下面再次给出该组件的源码. ViewStack: { xml: "<div id='view

  • xmlplus组件设计系列之文本框(TextBox)(3)

    文本框是页面中最常用的输入组件,它的默认使用方式如下: <input type='text'/> 当然,这里的 `type='text' 可以略去不写.大部分情况下,使用默认的文本框作为输入组件是没什么问题的,但在具体的项目中,难免会有功能扩展的需求.这里仅以如何增加文本框数据的格式化输入输出能力为例说明如何扩展原生的文本框组件.除了本章的内容,你也可以参考官方文档中的 参数映射 一章. 目标组件的功能分析 对于原生的文本框,我们获取到的值是文本类型的,就像下面的示例所展示的: Example

  • xmlplus组件设计系列之树(Tree)(9)

    树形组件是一种具有层级结构的组件,广泛应用于各种场景.本章会实现一个简单的树形组件,尽管功能有限,但你可以通过扩展它来实现自己所需要的树形组件. 数据源 树形组件的数据源可以是 JSON 格式的数据对象,也可以是具有 XML 结构的数据或者是其它的具有层级结构的数据.本章将采用具有如下 JSON 格式的数据对象. var data = { name: 'My Tree', children: [ { name: 'hello' }, { name: 'world' }, { name: 'chi

  • xmlplus组件设计系列之列表(4)

    列表组件是极其常用的一类组件,是许多视图组件系统的必须包含的.列表可以做的很简单,只显示简洁的内容.列表也可以做的很复杂,用于展示非常丰富的内容. 组成元素 列表离不开列表项以及包含列表项的容器.下面是最简单的列表组件,它包含一个列表项组件 Item 以及一个列表项容器组件 List. Item: { xml: "<li id='item'/>" }, List: { xml: "<ul id='list'/>" } 此列表组件尽管简单,但所

  • xmlplus组件设计系列之网格(DataGrid)(10)

    这一章我们要实现是一个网格组件,该组件除了最基本的数据展示功能外,还提供排序以及数据过滤功能. 数据源 为了测试我们即将编写好网格组件,我们采用如下格式的数据源.此数据源包含两部分的内容,分别是表头数据集和表体数据集.网格组件实例最终的列数由表头数据集的长度决定. var data = { gridColumns: ['name', 'power'], gridData: [ { name: 'Chuck Norris', power: Infinity }, { name: 'Bruce Le

  • xmlplus组件设计系列之图标(ICON)(1)

    网页上使用的图标分可为三种:文件图标.字体图标和 SVG 图标.对于文件图标,下面仅以 PNG 格式来说明. PNG 图标 对于 PNG 图标的引用,有两种方式.一种是直接由 HTML 元素 img 的 src 属性给出.下面是一个简单的示例. Icon: { css: "#icon { width: 68px; height: 68px; }", xml: "<img id='icon'/>", fun: function (sys, items, o

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

    "下拉刷新"由著名设计师 Loren Brichter 设计,并应用于 Twitter 第三方应用 Tweetie 中.2010年4月,Twitter 收购 Tweetie 开发商 Atebits 后,该专利归 Twitter 所有.这一章我们就来看看如何实现一个简单的下拉刷新组件. 目标组件分析 和前面在设计组件时的做法一样,我们先想想看最终的成品组件是如何使用的,这需要点想像力.下拉刷新组件看成一个容器组件是合理的,用户可以对容器的内容进行下拉操作.如果用户完成了完整的下拉触发操作

随机推荐