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 没有多少了解，可以访问 。这里有详尽的入门文档可供参考。