xmlplus组件设计系列的拉式刷新(6)

“下拉刷新”由著名设计师Loren Brichter设计，应用于Twitter第三方应用Tweetie。2010年4月，在Twitter收购了Tweetie开发者Atebits后，专利归Twitter所有。在本章中，我们将了解如何实现一个简单的下拉刷新组件。

目标成分分析

和之前的组件设计一样，我们先来思考一下最终完成的组件是如何使用的，这需要一点想象力。下拉刷新组件被视为容器组件是合理的，用户可以下拉容器的内容。如果用户完成下拉触发器操作，组件应该有下拉完成事件的反馈，假设事件名称已经准备好。根据上面的分析，我们很可能得到下面这个组件的应用示例。

example 1: { XML : ` pull refresh id=' example ' h1 Twitter/h1 H2 Loren Brichter/H2/pull refresh `，fun:函数(sys，items，opts) { sys.example.on('ready ')，()=console . log(' ready ')；}}示例中的用法非常简洁，但我们漏掉了一点。如果你使用过一些新闻客户端，在某些情况下，这个客户端会自动触发下拉刷新操作。例如，由于软件推送机制，只需进入客户端页面或更新被动列表，就会触发客户端下拉刷新操作。因此，上面的PullRefresh组件还应该提供一个触发自动刷新的操作界面。好了，下面是一个添加下拉刷新接口的应用示例。

example 2: { XML : ` pull refresh id=' example ' h1 Twitter/h1 H2 Loren Brichter/H2按钮id=' refresh ' click/button/pull refresh `，fun:函数(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元素包含两个子组件：其中一个是状态指示条，显示四个状态提示：“下拉刷新”、“释放刷新”、“正在加载.”和“刷新成功”，被未定义的状态组件临时替换；另一个div元素用于保存下拉刷新组件的内容。到目前为止，这个组件的工作逻辑大概可以想通了，所以我们可以给出下面的基本组件框架。

pullrefresh : { CSS : ' # refresh { position : relative；高度： 100%；} '，XML : ` div id=' refresh ' Status id=' Status '/div id=' content '/div `, map : { appendto : ' content ' }，fun : fun(sys，items，Opts){ sys . content . on(' touch start '，e={//侦听touchmove和touchend事件})；功能touchmove(e) {//1处理状态栏和内容内表面随触点移动//2根据触点移动的距离显示等效的状态栏内容}功能touchmove(e){//1移除touch move和touch事件//2决定返回原始状态或进入刷新状态并根据触点移动的距离调度事件}}}状态栏的实现

如前所述，状态栏组件包含四个状态提示，一次只显示一个状态。对于状态切换，我们将首先使用路由组件ViewStack，我们将在下一章中讨论，并且只需要知道如何在这里使用它。组件视图堆栈(Component ViewStack)只向外部世界显示其子组件的子组件，并监听切换事件，该事件的调度程序携带切换目标对象的名称，即id。组件根据该标识切换到目标视图。下面是状态栏组件的完整实现。

状态： { CSS : ' #状态栏{ height : 2.5 em线高： 2.5 em文本对齐：中心；} '，XML :视图堆栈id='状态栏' span id='拉'下拉刷新/span span id='ready '松开刷新/span span id='loading '加载中./span span id="成功"刷新成功/span /ViewStack，fun:函数(sys，items，opts){ var stat=' pull '；函数GetVaLue(){ return stat；}函数SetVaLue(value){ sys。状态栏。触发器('开关'，stat=值)；}返回object . definepreproperty({ }，' value '，{ get: getValue，set : setValue })；}}该组件提供一个价值接口用户设置与获取组件的显示状态。父级组件可根据不同的时机调用该接口。

最终实现

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

PullRefresh: { fun:函数(sys，items，opts) { var startY，height=sys。状态。高度()；sys.content.on('stouchstart '，e={ if(items。状态。value==' pull '){ startY=e . y；sys.content.on('touchmove '，touchmove).on('touchend '，touch end)；sys.content.css('transition '，').prev().css('transition '，' ')；} });函数触摸移动(e){ var offset=e . y-startY；if(偏移量0){ sys。内容。CSS(' top '，偏移量' px ')；sys.status.css('top '，(offset-height)' px ')；items.status(偏移高度？就绪':'拉');} }功能触摸结束(e){ var offset=e . y-startY；sys.content.off('touchmove ').关闭(“触摸结束”)；sys.content.css('transition '，'全0.3s轻松输入0s ').prev().css('transition '，'全0.3s轻松输入0s’)；如果(偏移高度){ sys.content.css('top '，' 0 ').prev().css('top '，-height ' px ')；} else { items。状态。值=' releasesys.refresh.once('完成，完成);sys.content.css(“顶部”，高度“px”).prev().css('top '，' 0 ').触发器("就绪");} }函数完成(){ items。状态。值=' messagesetTimeout(()={ sys。内容。CSS(' top '，' 0 ').prev().css('top '，-height ' px ')；系统。内容。一次(' WebKittransationEnd '，e=items。状态。value=' pull ')；}, 300);} }}对于稍微有点复杂的组件，需要注意组件的组织归类，尽量把具有相近功能的组件放在一起。为了便于叙述，上述所列出的组件示意总把它们视作是同一目录，这一点读者应该能看出来。

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

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