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"));
 }
}

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);
 }
}

<div id="refresh">
 <Status id="status"/>
 <div id="content"></div>
</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 根据触点移动的距离决定返回原始状态或者进入刷新状态并派发事件
  }
 }
}

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 });
 }
}

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);
  }
 }
}