├── .gitignore ├── 1.0 ├── build │ ├── drag-min.js │ ├── drag.js │ ├── index-min.js │ ├── index.js │ ├── plugin │ │ ├── pulldown-min.js │ │ ├── pulldown.js │ │ ├── pullup-min.js │ │ ├── pullup.js │ │ ├── scrollbar-min.js │ │ └── scrollbar.js │ ├── tap-min.js │ └── tap.js ├── demo │ ├── async-floor.html │ ├── data.json │ ├── default.html │ ├── demo.css │ ├── jhs.html │ ├── pagination.html │ ├── pulldownrefresh.html │ └── scrollbar.html ├── drag.js ├── guide │ └── index.md ├── index.js ├── meta │ ├── alias.js │ └── modules.js ├── plugin │ ├── pulldown.js │ ├── pullup.js │ └── scrollbar.js ├── tap.js └── test │ ├── ansyc-floor.html │ ├── data.js │ ├── data.json │ ├── default.html │ ├── runner.html │ ├── runner.js │ ├── scrollbar.html │ ├── scrollto.html │ ├── spec │ └── index-spec.js │ ├── test.html │ └── test2.html ├── 1.1.8 ├── Gruntfile.js ├── README.md ├── build │ ├── dataset-min.js │ ├── dataset.js │ ├── index-min.js │ ├── index.js │ ├── mods-min.js │ └── mods.js ├── demo │ ├── accelaration.html │ ├── async-data.html │ ├── data.json │ ├── default.html │ ├── demo.css │ ├── jhs.html │ ├── multi-cols.html │ ├── pagination.html │ ├── pulldownrefresh.html │ ├── sticky.html │ └── style.html ├── guide │ ├── dataset.md │ └── index.md ├── lib │ └── main.js ├── meta │ ├── alias.js │ └── modules.js ├── package.json ├── src │ ├── dataset.js │ └── index.js ├── test │ ├── ansyc-floor-new.html │ ├── data.json │ ├── dataset.html │ ├── default.html │ ├── dom-pool.html │ ├── fps.js │ ├── muti-cols-rotate.html │ ├── pullup.html │ ├── render.html │ ├── scrollto.html │ ├── spec │ │ └── index-spec.js │ └── sticky.html └── totoro-config.json ├── 1.1 ├── demo │ └── demo.css ├── drag.js ├── index.js ├── plugin │ ├── console.js │ ├── fastscroll.js │ ├── pulldown.js │ ├── pullup.js │ └── scrollbar.js ├── tap.js └── test │ ├── ansyc-floor.html │ ├── ansyc-floor.js │ ├── fast-scroll.html │ ├── raf.html │ └── raf.js ├── 2.0.0 ├── Gruntfile.js ├── README.md ├── build │ ├── drag-min.js │ ├── drag.js │ ├── index-min.js │ ├── index.js │ ├── plugin │ │ ├── pulldown-min.js │ │ ├── pulldown.js │ │ ├── pullup-min.js │ │ ├── pullup.js │ │ ├── scrollbar-min.js │ │ └── scrollbar.js │ ├── tap-min.js │ └── tap.js ├── demo │ ├── async-floor.html │ ├── data.json │ ├── default.html │ ├── demo.css │ ├── index.html │ ├── jhs.html │ ├── pagination.html │ ├── pulldownrefresh.html │ └── scrollbar.html ├── drag.js ├── guide │ └── index.md ├── index.js ├── index.less ├── lib │ └── main.js ├── meta │ ├── alias.js │ └── modules.js ├── package.json ├── plugin │ ├── pulldown.js │ ├── pullup.js │ └── scrollbar.js ├── tap.js ├── test │ ├── ansyc-floor.html │ ├── data.js │ ├── data.json │ ├── default.html │ ├── runner.html │ ├── runner.js │ ├── scrollbar.html │ ├── scrollto.html │ ├── spec │ │ └── index-spec.js │ ├── test.html │ └── test2.html └── totoro-config.json ├── 3.0.0 ├── Gruntfile.js ├── README.md ├── build │ ├── dataset-min.js │ ├── dataset.js │ ├── drag-min.js │ ├── drag.js │ ├── index-min.js │ ├── index.js │ ├── mods-min.js │ ├── mods.js │ ├── plugin │ │ ├── pulldown-min.js │ │ ├── pulldown.js │ │ ├── pullup-min.js │ │ ├── pullup.js │ │ ├── scrollbar-min.js │ │ └── scrollbar.js │ ├── tap-min.js │ └── tap.js ├── demo │ ├── async-data.html │ ├── async-floor.html │ ├── data.json │ ├── default.html │ ├── demo.css │ ├── index.html │ ├── jhs.html │ ├── pagination.html │ ├── pulldownrefresh.html │ ├── scrollbar.html │ ├── simple.html │ ├── stiky.html │ └── style.html ├── drag.js ├── guide │ ├── dataset.md │ └── index.md ├── index.js ├── index.less ├── lib │ └── main.js ├── meta │ ├── alias.js │ └── modules.js ├── package.json ├── plugin │ ├── pulldown.js │ ├── pullup.js │ └── scrollbar.js ├── src │ ├── dataset.js │ └── index.js ├── tap.js ├── test │ ├── ansyc-floor-new.html │ ├── ansyc-floor.html │ ├── data.js │ ├── data.json │ ├── dataset.html │ ├── default.html │ ├── dom-pool.html │ ├── fps.js │ ├── runner.html │ ├── runner.js │ ├── scrollbar.html │ ├── scrollto.html │ ├── simple.html │ ├── spec │ │ └── index-spec.js │ ├── sticky.html │ ├── test.html │ └── test2.html └── totoro-config.json ├── 3.0.1 ├── Gruntfile.js ├── README.md ├── build │ ├── dataset-min.js │ ├── dataset.js │ ├── index-min.js │ ├── index.js │ ├── mods-min.js │ └── mods.js ├── demo │ ├── accelaration.html │ ├── async-data.html │ ├── data.json │ ├── default.html │ ├── demo.css │ ├── jhs.html │ ├── multi-cols.html │ ├── pagination.html │ ├── pulldownrefresh.html │ ├── sticky.html │ └── style.html ├── guide │ ├── dataset.md │ └── index.md ├── lib │ └── main.js ├── meta │ ├── alias.js │ └── modules.js ├── package.json ├── src │ ├── dataset.js │ └── index.js ├── test │ ├── ansyc-floor-new.html │ ├── data.json │ ├── dataset.html │ ├── default.html │ ├── dom-pool.html │ ├── fps.js │ ├── scrollto.html │ ├── spec │ │ └── index-spec.js │ └── sticky.html └── totoro-config.json ├── 3.0.2 ├── Gruntfile.js ├── README.md ├── build │ ├── dataset-min.js │ ├── dataset.js │ ├── index-min.js │ ├── index.js │ ├── mods-min.js │ └── mods.js ├── demo │ ├── accelaration.html │ ├── async-data.html │ ├── data.json │ ├── default.html │ ├── demo.css │ ├── jhs.html │ ├── multi-cols.html │ ├── pagination.html │ ├── pulldownrefresh.html │ ├── sticky.html │ └── style.html ├── guide │ ├── dataset.md │ └── index.md ├── lib │ └── main.js ├── meta │ ├── alias.js │ └── modules.js ├── package.json ├── src │ ├── dataset.js │ └── index.js ├── test │ ├── ansyc-floor-new.html │ ├── data.json │ ├── dataset.html │ ├── default.html │ ├── dom-pool.html │ ├── fps.js │ ├── scrollto.html │ ├── spec │ │ └── index-spec.js │ └── sticky.html └── totoro-config.json ├── 3.0.3 ├── Gruntfile.js ├── README.md ├── build │ ├── dataset-min.js │ ├── dataset.js │ ├── index-min.js │ ├── index.js │ ├── mods-min.js │ └── mods.js ├── demo │ ├── accelaration.html │ ├── async-data.html │ ├── data.json │ ├── default.html │ ├── demo.css │ ├── index.html │ ├── jhs.html │ ├── multi-cols.html │ ├── pagination.html │ ├── pulldownrefresh.html │ ├── sticky.html │ └── style.html ├── guide │ ├── dataset.md │ └── index.md ├── lib │ └── main.js ├── meta │ ├── alias.js │ └── modules.js ├── package.json ├── src │ ├── dataset.js │ └── index.js ├── test │ ├── ansyc-floor-new.html │ ├── data.json │ ├── dataset.html │ ├── default.html │ ├── dom-pool.html │ ├── fps.js │ ├── muti-cols-rotate.html │ ├── pullup.html │ ├── render.html │ ├── scrollto.html │ ├── spec │ │ └── index-spec.js │ ├── sticky.html │ ├── sticky2.html │ └── sticky3.html └── totoro-config.json ├── Gruntfile.js ├── README.md ├── abc.json ├── doc ├── Gruntfile.js ├── README.md ├── build │ ├── dataset-min.js │ ├── dataset.js │ ├── drag-min.js │ ├── drag.js │ ├── index-min.js │ ├── index.js │ ├── mods-min.js │ ├── mods.js │ ├── plugin │ │ ├── console-min.js │ │ ├── console.js │ │ ├── fps-min.js │ │ ├── fps.js │ │ ├── mods-min.js │ │ ├── mods.js │ │ ├── pulldown-min.js │ │ ├── pulldown.js │ │ ├── pullup-min.js │ │ ├── pullup.js │ │ ├── scrollbar-min.js │ │ └── scrollbar.js │ ├── tap-min.js │ └── tap.js ├── demo │ ├── accelaration.html │ ├── all.html │ ├── async-data.html │ ├── async-floor.html │ ├── data.json │ ├── default.html │ ├── demo.css │ ├── index.html │ ├── jhs.html │ ├── multi-cols.html │ ├── pagination.html │ ├── pulldownrefresh.html │ ├── scrollbar.html │ ├── sticky.html │ ├── stiky.html │ └── style.html ├── drag.js ├── guide │ ├── dataset.md │ └── index.md ├── index.js ├── index.less ├── lib │ └── main.js ├── meta │ ├── alias.js │ └── modules.js ├── package.json ├── plugin │ ├── pulldown.js │ ├── pullup.js │ └── scrollbar.js ├── src │ ├── dataset.js │ ├── index.js │ └── plugin │ │ ├── console.js │ │ └── fps.js ├── tap.js ├── test │ ├── ansyc-floor-new.html │ ├── ansyc-floor.html │ ├── data.js │ ├── data.json │ ├── dataset.html │ ├── default.html │ ├── dom-pool.html │ ├── fps.js │ ├── muti-cols-rotate.html │ ├── pullup.html │ ├── render.html │ ├── runner.html │ ├── runner.js │ ├── scrollbar.html │ ├── scrollto.html │ ├── spec │ │ └── index-spec.js │ ├── sticky.html │ ├── sticky2.html │ ├── sticky3.html │ ├── test.html │ └── test2.html └── totoro-config.json ├── package.json └── totoro-config.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | npm-debug.log 4 | *.swp 5 | .sw* 6 | .idea/* -------------------------------------------------------------------------------- /1.0/build/drag-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("gallery/xlist/1.0/drag",function(a){function b(a){return a.changedTouches.length>1?void(l=!0):(o=[],n={},n.startX=a.touches[0].clientX,n.startY=a.touches[0].clientY,n.deltaX=0,n.deltaY=0,a.touch=n,o.push({deltaX:n.deltaX,deltaY:n.deltaY,timeStamp:a.timeStamp}),a.deltaX=n.deltaX,a.deltaY=n.deltaY,void m(a.target).fire(g,a))}function c(a){a.changedTouches.length>1||(o.length?(n.deltaX=a.touches[0].clientX-n.startX,n.deltaY=a.touches[0].clientY-n.startY,a.touch=n,o.push({deltaX:n.deltaX,deltaY:n.deltaY,timeStamp:a.timeStamp}),a.deltaX=n.deltaX,a.deltaY=n.deltaY,a.velocityX=0,a.velocityY=0,a.isPropagationStopped()||m(a.target).fire(i,a)):(n={},n.startX=a.touches[0].clientX,n.startY=a.touches[0].clientY,n.deltaX=0,n.deltaY=0,a.touch=n,o.push({deltaX:n.deltaX,deltaY:n.deltaY,timeStamp:a.timeStamp}),a.deltaX=n.deltaX,a.deltaY=n.deltaY,m(a.target).fire(g,a)))}function d(a){var b=0,c=0,d=0;if(!(a.changedTouches.length>1)){n.deltaX=a.changedTouches[0].clientX-n.startX,n.deltaY=a.changedTouches[0].clientY-n.startY,a.deltaX=n.deltaX,a.deltaY=n.deltaY,a.touch=n,a.touch.record=o;var g=(a.touch.startX,a.touch.startY,o.length),i=o[0]&&o[0].timeStamp;if(!(2>g)&&i){{o[g-1].timeStamp-o[0].timeStamp}for(var j in o)j>0?(o[j].velocity=e(o[j].deltaX,o[j].deltaY,o[j-1].deltaX,o[j-1].deltaY)/(o[j].timeStamp-o[j-1].timeStamp),o[j].velocityX=(o[j].deltaX-o[j-1].deltaX)/(o[j].timeStamp-o[j-1].timeStamp),o[j].velocityY=(o[j].deltaY-o[j-1].deltaY)/(o[j].timeStamp-o[j-1].timeStamp)):(o[j].velocity=0,o[j].velocityX=0,o[j].velocityY=0);var l=o[0].velocityX/Math.abs(o[0].velocityX);for(var j in o)o[j].velocityX/Math.abs(o[j].velocityX)!=l&&(l=o[j].velocityX/Math.abs(o[j].velocityX),d=j);var p=o[0].velocityY/Math.abs(o[0].velocityY);for(var j in o)o[j].velocityY/Math.abs(o[j].velocityY)!=p&&(p=o[j].velocityY/Math.abs(o[j].velocityY),c=j);b=Math.max(d,c);{o[b]}a.touch.record=a.touch.record.splice(b-1);var q=f(a.touch.record);a.velocityX=Math.abs(q.velocityX)>k?q.velocityX/Math.abs(q.velocityX)*k:q.velocityX,a.velocityY=Math.abs(q.velocityY)>k?q.velocityY/Math.abs(q.velocityY)*k:q.velocityY,a.velocity=Math.sqrt(Math.pow(a.velocityX,2)+Math.pow(a.velocityY,2)),m(a.target).fire(h,a),n={},o=[]}}}function e(a,b,c,d){return Math.sqrt(Math.pow(c-a,2)+Math.pow(d-b,2))}function f(a){for(var b=0,c=0,d=a.length,e=0;d>e;e++)b+=a[e].velocityY,c+=a[e].velocityX;return b/=d,c/=d,{velocityY:Math.abs(a[d-1].velocityY)>j?b:0,velocityX:Math.abs(a[d-1].velocityX)>j?c:0}}var g=(window.document,"gestureDragStart"),h="gestureDragEnd",i="gestureDrag",j=.35,k=8,l=!1,m=a.all,n={},o=[];return a.each([i],function(e){a.Event.Special[e]={setup:function(){m(this).on("touchstart",b),m(this).on("touchmove",c),m(this).on("touchend",d)},teardown:function(){m(this).detach("touchstart",b),m(this).detach("touchmove",c),m(this).detach("touchend",d)}}}),{DRAG_START:g,DRAG:i,DRAG_END:h}},{requires:["node","event"]}); -------------------------------------------------------------------------------- /1.0/build/plugin/pulldown-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("gallery/xlist/1.0/plugin/pulldown",function(a,b){var c,d=a.all,e="Pull Down To Refresh",f="Loading...",g=b.extend({initializer:function(){var b=this,d=b.userConfig.xlist;b.userConfig=a.merge({content:e,downContent:"",upContent:"",loadingContent:f,prefix:"ks-xlist-plugin-pulldown-"},b.userConfig),c=b.userConfig.prefix,d&&d.on("afterRender",function(){b.render()})},render:function(){var a=this,b=c+"container",e='
',f=a.userConfig.xlist,g=a.userConfig.height||60,h=a.$pulldown=d(e).css({position:"absolute",width:"100%",height:g,top:-g}).prependTo(f.$ctn);a.on("afterStatusChange",function(b){h.removeClass(c+b.prevVal).addClass(c+b.newVal),a.setContent(a.userConfig[b.newVal+"Content"])}),h.addClass(c+a.get("status")),h.html(a.userConfig[a.get("status")+"Content"]||a.userConfig.content),a._bindEvt()},_bindEvt:function(){var a=this;if(!a._evtBinded){var b,c,d=a.userConfig.height||60,e=0;xlist.on("drag",function(){e=xlist.getOffsetTop(),e>0&&(Math.abs(e)d&&!a.isBoundryBounce&&"tapHold"!=f.originType&&(xlist.disableBoundryCheck(),xlist.scrollTo(-d,.4),xlist.isScrolling=!1,a.set("status","loading"),c=setTimeout(function(){xlist.enableBoundryCheck()},500),b=setTimeout(function(){location.reload()},700))}),a._evtBinded=!0}},setContent:function(a){var b=this;a&&b.$pulldown.html(a)}},{ATTRS:{status:{value:"down"}}});return g},{requires:["base","node"]}); -------------------------------------------------------------------------------- /1.0/build/plugin/pullup-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("gallery/xlist/1.0/plugin/pullup",function(a,b){var c,d=a.all,e="Pull Down To Refresh",f="Loading...",g=b.extend({initializer:function(){var b=this,d=b.userConfig.xlist;b.userConfig=a.merge({content:e,downContent:"",upContent:"",pullUpHeight:40,loadingContent:f,boundry:{},prefix:"ks-xlist-plugin-pullup-"},b.userConfig);b.userConfig.height||60;c=b.userConfig.prefix,d.on("afterRender",function(){b.render(),b._bindEvt()})},render:function(){{var a=this,b=c+"container",e=a.userConfig.xlist,f=a.userConfig.height||60;a.$pullup=d("
").addClass(b).css({position:"absolute",bottom:-f,width:"100%"}).prependTo(e.$ctn)}a.fire("afterRender")},_bindEvt:function(){var a=this;if(!a._evtBinded){var b=a.userConfig.xlist,d=a.$pullup,e=0;a.on("afterStatusChange",function(b){d.removeClass(c+b.prevVal).addClass(c+b.newVal),a.setContent(a.userConfig[b.newVal+"Content"])}),d.addClass(c+a.get("status")),d.html(a.userConfig[a.get("status")+"Content"]||a.userConfig.content),b.on("drag",function(){e=b.getOffsetTop(),e 4 | * @plugin pullup XLIST上拉加载插件 5 | **/ 6 | ;KISSY.add("gallery/xlist/1.0/plugin/pullup",function(S, Base, Node) { 7 | var $ = S.all; 8 | var prefix; 9 | var containerCls; 10 | var content = "Pull Down To Refresh"; 11 | var loadingContent = "Loading..."; 12 | 13 | var PullUp = Base.extend({ 14 | initializer: function() { 15 | var self = this; 16 | var xlist = self.userConfig.xlist; 17 | self.userConfig = S.merge({ 18 | content: content, 19 | downContent: "", 20 | upContent: "", 21 | pullUpHeight:40, 22 | loadingContent: loadingContent, 23 | boundry:{}, 24 | prefix: "ks-xlist-plugin-pullup-" 25 | }, self.userConfig); 26 | var height = self.userConfig.height || 60; 27 | prefix = self.userConfig.prefix; 28 | // xlist.userConfig.boundry.bottom = height; 29 | xlist.on("afterRender",function(){ 30 | self.render() 31 | self._bindEvt(); 32 | }) 33 | 34 | 35 | 36 | }, 37 | render: function() { 38 | var self = this; 39 | var containerCls = prefix + "container"; 40 | var tpl = '
'; 41 | var xlist = self.userConfig.xlist; 42 | var height = self.userConfig.height || 60; 43 | var $pullup = self.$pullup = $("
").addClass(containerCls).css({ 44 | "position":"absolute", 45 | "bottom":-height, 46 | "width":"100%" 47 | }).prependTo(xlist.$ctn); 48 | self.fire("afterRender"); 49 | }, 50 | _bindEvt:function(){ 51 | var self =this; 52 | if(self._evtBinded) return; 53 | var xlist= self.userConfig.xlist; 54 | var $pullup = self.$pullup; 55 | var offsetTop = 0; 56 | 57 | self.on("afterStatusChange", function(e) { 58 | $pullup.removeClass(prefix + e.prevVal).addClass(prefix + e.newVal); 59 | self.setContent(self.userConfig[e.newVal + "Content"]); 60 | }) 61 | 62 | $pullup.addClass(prefix + self.get("status")); 63 | $pullup.html(self.userConfig[self.get("status") + "Content"] || self.userConfig["content"]); 64 | 65 | xlist.on("drag", function(e) { 66 | offsetTop = xlist.getOffsetTop(); 67 | if (offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight) { 68 | //松开加载更多 69 | self.set("status","down") 70 | }else{ 71 | self.set("status","up") 72 | } 73 | }) 74 | 75 | xlist.on("scrollEnd",function(e){ 76 | offsetTop = e.offsetTop 77 | if(offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight){ 78 | self.set("status","loading"); 79 | self.fire("loading",function(){ 80 | 81 | }) 82 | } 83 | }) 84 | 85 | xlist.on("dataChange", function() { 86 | self.set("status","up") 87 | }) 88 | 89 | self._evtBinded = true; 90 | 91 | }, 92 | setContent: function(content) { 93 | var self = this; 94 | if (content){ 95 | self.$pullup.html(content); 96 | } 97 | } 98 | }, { 99 | ATTRS: { 100 | "status": { 101 | value: "up" 102 | } 103 | 104 | } 105 | }) 106 | 107 | return PullUp; 108 | 109 | 110 | }, { 111 | requires: ['base', 'node'] 112 | }); -------------------------------------------------------------------------------- /1.0/build/plugin/scrollbar-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("gallery/xlist/1.0/plugin/scrollbar",function(a,b,c){var d=a.all,e=60,f=5,g=c.extend({initializer:function(){var b=this;b.userConfig=a.merge({},b.userConfig),b.xlist=b.userConfig.xlist,b.xlist.on("sync",function(){b.set("containerHeight",b.xlist.containerHeight),b.set("indicateHeight",b.xlist.height),b.set("offsetTop",b.xlist.getOffsetTop()),b.render(),b._bindEvt()})},render:function(){var a=this;if(!a.__isRender){a.__isRender=!0;var b=a.xlist,c="
";a.$scrollbar=d(c).css({width:"3px",position:"absolute",bottom:"2px",top:"2px",right:"2px",zIndex:999,overflow:"hidden","-webkit-border-radius":"2px"}).prependTo(b.$renderTo);var e="
";a.$indicate=d(e).css({"-webkit-box-sizing":"border-box",position:"absolute",background:"rgba(0,0,0,0.3)","-webkit-border-radius":"1.5px"}).prependTo(a.$scrollbar).css({width:"100%"}),a._update()}},_update:function(){var a=this,b=a.computeScrollBar(Math.abs(a.get("offsetTop")));a._moveTo(b.top),a.$indicate.height(b.height)},computeScrollBar:function(a){var b=this,a=a||0,c=b.get("indicateHeight"),d=b.get("containerHeight"),g=a/d,h=c*g,i=c*c/d,j=h*(c-e+i)/c;if(e>i&&(i=e,h=j),0>h)h=Math.abs(a)*i/e>i-f?f-i:a*i/e;else if(h+i>c){var k=a-d+c;h=k*i/e>i-f?c-f:c-i+k*i/e}return b.set("barOffsetTop",h),{height:i,top:h}},_scrollTo:function(a,b,c){var d=this;d.show(),d.$indicate[0].style.webkitTransform="translateY("+a+"px)",d.$indicate[0].style.webkitTransition=[b,"s ",c," 0"].join("")},_moveTo:function(a){var b=this;b.show(),b.$indicate[0].style.webkitTransform="translateY("+a+"px)",b.$indicate[0].style.webkitTransition=""},_bindEvt:function(){var a=this;a.__isEvtBind||(a.__isEvtBind=!0,a.xlist.on("drag",function(){a._moveTo(a.computeScrollBar(-a.xlist.getOffsetTop()).top)}),a.xlist.on("scrollTo",function(b){a._scrollTo(a.computeScrollBar(b.offsetTop).top,b.duration,b.easing)}),a.xlist.on("dragStart",function(){a.isBoundryBounce=!1}),a.xlist.on("outOfBoundry",function(){a.isBoundryBounce=!0}),a.xlist.on("scrollEnd",function(b){a.isBoundryBounce||"tapHold"==b.originType||a._moveTo(a.computeScrollBar(-a.xlist.getOffsetTop()).top)}),d(window).on("resize",function(){a._update()}),a.on("afterOffsetTopChange",function(){a._update()}),a.on("afterIndicateHeightChange",function(){a._update()}),a.on("afterContainerHeightChange",function(){a._update()}))},hide:function(){var a=this;a.$scrollbar.css({opacity:0}),a.$scrollbar[0].style.webkitTransition="opacity 0.3s ease-out"},show:function(){var a=this;a.$scrollbar.css({opacity:1})}},{ATTRS:{offsetTop:{value:0},containerHeight:{value:0},indicateHeight:{value:0},barHeight:{value:0},barOffsetTop:{value:0}}});return g},{requires:["node","base","anim"]}); -------------------------------------------------------------------------------- /1.0/build/tap-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("gallery/xlist/1.0/tap",function(a){function b(){if(l.length>2){for(var a=[],b=1;bc?!0:!1}function d(){if(b(),1==l.length)return!1;var a=l[1].startTime-l[0].startTime;return k>a?!0:!1}function e(b){if(b.touches.length>1)return void(m=!1);var c=(b.currentTarget,b.target),d=b.changedTouches[0].clientX,e=b.changedTouches[0].clientY;m={startX:d,startY:e,startTime:Number(new Date),e:b},n&&clearTimeout(n);var c=b.target;n=setTimeout(function(){if(m){var f={};a.mix(f,b),a.mix(f,{type:"tapHold",pageX:d,pageY:e,originalEvent:b}),a.one(c).fire("tapHold",f)}clearTimeout(n)},j)}function f(e){if(m){var f=e.changedTouches[0].clientX,g=e.changedTouches[0].clientY,j=Math.abs(f-m.startX),n=Math.abs(g-m.startY);if(a.mix(m,{endX:f,endY:g,distance:Math.sqrt(j*j+n*n),timeSpan:Number(Number(new Date)-m.startTime)}),m.timeSpan>h)return void(m=!1);if(m.distance>i)return void(m=!1);if(!c(m)){l.push(m),b();var p={};a.mix(p,e),a.mix(p,{type:"tap",pageX:f,pageY:g,originalEvent:e});var q=e.target;return a.one(q).fire("tap",p),o?(d()&&(a.mix(p,{type:"doubleTap"}),a.one(q).fire("doubleTap",p)),clearTimeout(o),void(o=null)):void(o=setTimeout(function(){clearTimeout(o),o=null,a.mix(p,{type:"singleTap"}),a.one(q).fire("singleTap",p)},k))}}}var g=a.all,h=250,i=10,j=750,k=100,l=[],m=!1,n=null,o=null;a.each(["tap","tapHold","singleTap","doubleTap"],function(b){a.Event.Special[b]={setup:function(){g(this).on("touchstart",e),g(this).on("touchend",f)},teardown:function(){g(this).detach("touchstart",e),g(this).detach("touchend",f)}}})},{requires:["node","event"]}); -------------------------------------------------------------------------------- /1.0/demo/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "itemList": [{ 3 | "num": 0 4 | }, { 5 | "num": 1 6 | }, { 7 | "num": 2 8 | }, { 9 | "num": 3 10 | }, { 11 | "num": 4 12 | }, { 13 | "num": 5 14 | }, { 15 | "num": 6 16 | }, { 17 | "num": 7 18 | }, { 19 | "num": 8 20 | }, { 21 | "num": 9 22 | },{ 23 | "num": 10 24 | }, { 25 | "num": 11 26 | }, { 27 | "num": 12 28 | }, { 29 | "num": 13 30 | }, { 31 | "num": 14 32 | }, { 33 | "num": 15 34 | }, { 35 | "num": 16 36 | }, { 37 | "num": 17 38 | }, { 39 | "num": 18 40 | }, { 41 | "num": 19 42 | }] 43 | } -------------------------------------------------------------------------------- /1.0/demo/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | XList demo: infinite scrolling 9 | 10 | 11 | 12 | 13 |
14 |
    15 |
    16 | 17 | 18 | 19 | 52 | 53 | -------------------------------------------------------------------------------- /1.0/demo/demo.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | -ms-touch-action: none; 9 | } 10 | 11 | body,ul,li { 12 | padding: 0; 13 | margin: 0; 14 | border: 0; 15 | } 16 | 17 | body { 18 | font-size: 12px; 19 | font-family: ubuntu, helvetica, arial; 20 | overflow: hidden; 21 | } 22 | 23 | #header { 24 | position: absolute; 25 | z-index: 2; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 45px; 30 | line-height: 45px; 31 | background: #f60; 32 | padding: 0; 33 | color: #eee; 34 | font-size: 20px; 35 | text-align: center; 36 | font-weight: bold; 37 | } 38 | 39 | #footer { 40 | position: absolute; 41 | z-index: 2; 42 | bottom: 0; 43 | left: 0; 44 | width: 100%; 45 | height: 48px; 46 | background: #444; 47 | padding: 0; 48 | border-top: 1px solid #444; 49 | line-height: 48px; 50 | color:#fff; 51 | text-align: center; 52 | } 53 | 54 | #J_List { 55 | position: absolute; 56 | z-index: 1; 57 | top: 45px; 58 | bottom: 48px; 59 | left: 0; 60 | width: 100%; 61 | background: #ccc; 62 | overflow: hidden; 63 | } 64 | 65 | .ks-xlist-container { 66 | position: absolute; 67 | z-index: 1; 68 | -webkit-tap-highlight-color: rgba(0,0,0,0); 69 | width: 100%; 70 | -webkit-transform: translateZ(0); 71 | -moz-transform: translateZ(0); 72 | -ms-transform: translateZ(0); 73 | -o-transform: translateZ(0); 74 | transform: translateZ(0); 75 | -webkit-touch-callout: none; 76 | -webkit-user-select: none; 77 | -moz-user-select: none; 78 | -ms-user-select: none; 79 | user-select: none; 80 | -webkit-text-size-adjust: none; 81 | -moz-text-size-adjust: none; 82 | -ms-text-size-adjust: none; 83 | -o-text-size-adjust: none; 84 | text-size-adjust: none; 85 | } 86 | 87 | .ks-xlist-container { 88 | -webkit-backface-visibility:hidden; 89 | } 90 | 91 | .ks-xlist-container li { 92 | position: absolute; 93 | width: 100%; 94 | top: 0; 95 | left: 0; 96 | -webkit-transform: translateZ(0); 97 | -moz-transform: translateZ(0); 98 | -ms-transform: translateZ(0); 99 | -o-transform: translateZ(0); 100 | transform: translateZ(0); 101 | padding: 0 10px; 102 | height: 40px; 103 | line-height: 40px; 104 | border-bottom: 1px solid #ccc; 105 | border-top: 1px solid #fff; 106 | background-color: #fafafa; 107 | font-size: 16px; 108 | } 109 | 110 | .ks-xlist-plugin-pulldown-container{ 111 | text-align: center; 112 | width: 100%; 113 | line-height: 50px; 114 | } 115 | .ks-xlist-plugin-pulldown-up .up{ 116 | display: inline; 117 | } 118 | .ks-xlist-plugin-pulldown-up .down{ 119 | display: none; 120 | } 121 | .ks-xlist-plugin-pulldown-down .up{ 122 | display: none; 123 | } 124 | .ks-xlist-plugin-pulldown-down .down{ 125 | display: inline; 126 | } 127 | 128 | .ks-xlist-plugin-pullup-container{ 129 | line-height: 60px; 130 | text-align: center; 131 | } -------------------------------------------------------------------------------- /1.0/demo/pulldownrefresh.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | XList demo: infinite scrolling 9 | 10 | 11 | 12 | 13 |
    14 |
      15 |
      16 | 17 | 18 | 19 | 60 | 61 | -------------------------------------------------------------------------------- /1.0/demo/scrollbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | XList demo: infinite scrolling 9 | 10 | 11 | 12 | 13 |
      14 |
        15 |
        16 | 17 | 18 | 19 | 58 | 59 | -------------------------------------------------------------------------------- /1.0/guide/index.md: -------------------------------------------------------------------------------- 1 | ## 综述 2 | 3 | Xlist是基于html5的无尽下拉列表实现，适用于数据量大的html大列表，支持复杂的文档流类型，支持异步加载、刷新、滚动条等功能。 4 | 5 | * 版本：1.0 6 | * 作者：伯才 7 | * demo： 8 | ### 注意：以下demo请在移动设备上查看 9 | 10 | [最简demo](../demo/default.html) 11 | 12 | [滚动条.html](../demo/scrollbar.html) 13 | 14 | [下拉刷新.html](../demo/pulldownrefresh.html) 15 | 16 | [上拉分页-滚动条-下拉刷新.html](../demo/pagination.html) 17 | 18 | [异步楼层加载](../demo/async-floor.html) 19 | 20 | [聚划算wap简单demo](../demo/jhs.html) 21 | 22 | [聚划算ipad今日团list](http://ju.taobao.com/pad/normal.htm) 23 | 24 | ## 初始化组件 25 | 26 | S.use('gallery/xlist/1.0/index', function (S, XList) { 27 | var xlist = new XList({ 28 | renderTo: "#J_List", 29 | data: data, 30 | template: '

        Xlist的demo {{num}}

        ', 31 | itemHeight: 50 //行高 32 | }); 33 | }) 34 | 35 | 36 | ## API说明 37 | 38 | ### Attribute 39 | 40 | #### renderTo 41 | 42 | { id|HTMLElement } 渲染的容器，需要设置容器的宽高，postion为relative或absolute 43 | 44 | #### itemHeight 45 | 46 | { Number } 列表项的高度 47 | 48 | #### data 49 | 50 | { Array } 初始化需要传入的数据 51 | 52 | #### autoRender 53 | 54 | { Boolean } 是否自动渲染，若设置为false，则需要手动调用render()方法 55 | 56 | #### translate3D 57 | 58 | { Boolean } 是否开启3Dtranslate以提高滚动性能 59 | 60 | #### stickies 61 | 62 | { Object } 黏在页面上伴随着滚动的元素列表，如:banner slide之类的非常规item 63 | 64 | - 键(key) 代表行号 如{1:{template:"{{demo}}",height:100}} 65 | - 值(value) {object} 66 | - template {string} 模板|html内容 KISSY.Template 67 | - height {number} 行高 68 | - type {number} 坑位类型 69 | 1、常规元素(不用设置) 70 | 2、不进行dom回收的非常规元素(默认为2，带有js的，如slide 等通过js处理的坑位) 71 | 72 | 73 | 74 | #### renderHook 75 | 76 | { Function } 返回e.element代表当前可用的节点 e.data代表当前行的数据 e.template代表默认模板（可自定义）KISSY.Template e.row代表当前屏幕可视区域内渲染的行号。 77 | 78 | 79 | #### SROLL_ACCELERATION 80 | 81 | { Float } 页面滚动阻尼系数，默认 0.002，值越小，摩擦力越小，页面滚动的距离越长。 82 | 83 | 84 | ### Method 85 | 86 | #### render() 87 | 88 | 渲染 89 | 90 | #### getOffsetTop() 91 | 92 | 获取页面顶部因滚动卷去的偏移量，向上为负数。 93 | 94 | #### scrollTo(offset,duration) 95 | 96 | 滚动到某个位置 97 | 98 | #### enableBoundryCheck() 99 | 100 | 滚动到顶部（底部）的回弹开关 101 | 102 | #### disableBoundryCheck() 103 | 104 | 滚动到顶部（底部）的回弹开关 105 | 106 | 107 | ### Event 108 | 109 | #### scroll 110 | 111 | 滚动时触发 112 | 113 | #### scrollEnd 114 | 115 | 滚动结束时触发 116 | 117 | #### afterRender 118 | 119 | 渲染结束后触发，该方法仅触发一次 120 | 121 | #### sync 122 | 123 | 每一次render()方法后触发 124 | 125 | #### dragStart 126 | 127 | 开始拖动页面前触发 128 | 129 | #### drag 130 | 131 | 拖动时触发 132 | 133 | #### dragEnd 134 | 135 | 拖动结束后触发，会包含速度矢量。 136 | 137 | #### outOfBoundry 138 | 139 | 上下越界回弹时触发 140 | 141 | 142 | 143 | ### Plugins 144 | 145 | #### scrollbar 146 | 147 | 滚动条插件 148 | 149 | #### pulldown 150 | 151 | 下拉刷新插件 152 | 153 | #### pullup 154 | 155 | 上拉加载插件 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /1.0/meta/alias.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'gallery/xlist/index': {alias: ['gallery/xlist/1.0/index']} 3 | }); -------------------------------------------------------------------------------- /1.0/meta/modules.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'gallery/xlist/index': {requires: ['node','base']} 3 | }); -------------------------------------------------------------------------------- /1.0/plugin/pullup.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview 3 | * @author 伯才 4 | * @plugin pullup XLIST上拉加载插件 5 | **/ 6 | ;KISSY.add("gallery/xlist/1.0/plugin/pullup",function(S, Base, Node) { 7 | var $ = S.all; 8 | var prefix; 9 | var containerCls; 10 | var content = "Pull Down To Refresh"; 11 | var loadingContent = "Loading..."; 12 | 13 | var PullUp = Base.extend({ 14 | initializer: function() { 15 | var self = this; 16 | var xlist = self.userConfig.xlist; 17 | self.userConfig = S.merge({ 18 | content: content, 19 | downContent: "", 20 | upContent: "", 21 | pullUpHeight:40, 22 | loadingContent: loadingContent, 23 | boundry:{}, 24 | prefix: "ks-xlist-plugin-pullup-" 25 | }, self.userConfig); 26 | var height = self.userConfig.height || 60; 27 | prefix = self.userConfig.prefix; 28 | // xlist.userConfig.boundry.bottom = height; 29 | xlist.on("afterRender",function(){ 30 | self.render() 31 | self._bindEvt(); 32 | }) 33 | 34 | 35 | 36 | }, 37 | render: function() { 38 | var self = this; 39 | var containerCls = prefix + "container"; 40 | var tpl = '
        '; 41 | var xlist = self.userConfig.xlist; 42 | var height = self.userConfig.height || 60; 43 | var $pullup = self.$pullup = $("
        ").addClass(containerCls).css({ 44 | "position":"absolute", 45 | "bottom":-height, 46 | "width":"100%" 47 | }).prependTo(xlist.$ctn); 48 | self.fire("afterRender"); 49 | }, 50 | _bindEvt:function(){ 51 | var self =this; 52 | if(self._evtBinded) return; 53 | var xlist= self.userConfig.xlist; 54 | var $pullup = self.$pullup; 55 | var offsetTop = 0; 56 | 57 | self.on("afterStatusChange", function(e) { 58 | $pullup.removeClass(prefix + e.prevVal).addClass(prefix + e.newVal); 59 | self.setContent(self.userConfig[e.newVal + "Content"]); 60 | }) 61 | 62 | $pullup.addClass(prefix + self.get("status")); 63 | $pullup.html(self.userConfig[self.get("status") + "Content"] || self.userConfig["content"]); 64 | 65 | xlist.on("drag", function(e) { 66 | offsetTop = xlist.getOffsetTop(); 67 | if (offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight) { 68 | //松开加载更多 69 | self.set("status","down") 70 | }else{ 71 | self.set("status","up") 72 | } 73 | }) 74 | 75 | xlist.on("scrollEnd",function(e){ 76 | offsetTop = e.offsetTop 77 | if(offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight){ 78 | self.set("status","loading"); 79 | self.fire("loading",function(){ 80 | 81 | }) 82 | } 83 | }) 84 | 85 | xlist.on("dataChange", function() { 86 | self.set("status","up") 87 | }) 88 | 89 | self._evtBinded = true; 90 | 91 | }, 92 | setContent: function(content) { 93 | var self = this; 94 | if (content){ 95 | self.$pullup.html(content); 96 | } 97 | } 98 | }, { 99 | ATTRS: { 100 | "status": { 101 | value: "up" 102 | } 103 | 104 | } 105 | }) 106 | 107 | return PullUp; 108 | 109 | 110 | }, { 111 | requires: ['base', 'node'] 112 | }); -------------------------------------------------------------------------------- /1.0/test/data.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | function genData(floorId,num){ 3 | var data = []; 4 | for(var i =0;i 2 | 3 | 4 | 5 | 6 | Runner 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /1.0/test/runner.js: -------------------------------------------------------------------------------- 1 | KISSY.add(function(){ 2 | //在这里requires需要运行的用例文件 3 | 4 | 5 | },{requires:['test/spec/index-spec']}) -------------------------------------------------------------------------------- /1.0/test/spec/index-spec.js: -------------------------------------------------------------------------------- 1 | KISSY.add(function (S, Node,Demo) { 2 | var $ = Node.all; 3 | describe('xlist', function () { 4 | it('Instantiation of components',function(){ 5 | var demo = new Demo(); 6 | expect(S.isObject(demo)).toBe(true); 7 | }) 8 | }); 9 | 10 | },{requires:['node','gallery/xlist/1.0/']}); -------------------------------------------------------------------------------- /1.1.8/README.md: -------------------------------------------------------------------------------- 1 | ## xlist 2 | 3 | * 版本：3.0.0 4 | * 教程：[http://gallery.kissyui.com/xlist/3.0.0/guide/index.html](http://gallery.kissyui.com/xlist/3.0.0/guide/index.html) 5 | 6 | ## changelog 7 | 8 | ### V1.0 9 | 10 | * 修复下拉刷新长按时触发刷新的bug 11 | * 优化误操作点击时打开超链接的bug 12 | * 优化滚动条回弹效果 13 | * render方法可强制更新渲染可视范围内已渲染的节点 14 | * 修复scrollTo不带duration参数时无止境回调scroll事件的bug 15 | * 修复scrollTo滚动高度未发生变化不回调scrollEnd事件的bug 16 | * 修复滚动条下边界回弹bug 17 | * 重写tap事件，方便进行事件互斥 18 | 19 | 20 | ### V1.1 21 | 22 | * 动画单位统一至ms 23 | * dragStart、drag、dragEnd事件统一成panStart、pan、panEnd 24 | * 去除sync()方法，采用render()重新渲染即可 25 | * 解耦dom回收更新机制，RequestAnimateFrame替代setTimeout方案 26 | * 去除stickies配置 合并到data 新的数据源格式：受保护字段recycled、template、height可自定义配置（防止数据中有重复字段） 27 | * 数据分组 setDataWithGroup(data,groupId) groupId可为空 则默认从0开始计数 28 | * 新增console插件，方便查看dom数量、行号及dom池数量，调试时直接plug()即可 29 | * 新增maxBufferedNum配置项，用于配制可视范围内的行余量。 30 | 31 | ### v2.0.0 32 | 33 | * 配合kissy gallery社区升级，目前2.0.0不可用，请使用v3.0以上版本！ 34 | 35 | ### V3.0.0 36 | 37 | * 原始数据格式调整，增加数据样式等描述 38 | * 重用dom数固定，通过infiniteElements配置 39 | * 新增DataSet数据集 40 | * renderHook参数调整，无需return 41 | * 支持任意高度元素回收 42 | * 支持position:sticky 43 | * 性能优化 44 | * panstart事件定义为发生移动才出发，区分touchstart 45 | * 支持同步渲染 46 | * 移除autoRender配置，默认不渲染，需要手动render() 47 | 48 | ### V3.0.1 49 | 50 | * 父类XScroll升级1.1.5 51 | 52 | ### V3.0.2 53 | 54 | * 父类XScroll升级1.1.6 55 | 56 | ### V3.0.3 57 | 58 | * 修复非回收元素重复render的bug 59 | * 父类XScroll升级1.1.8 60 | 61 | -------------------------------------------------------------------------------- /1.1.8/build/dataset-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-09-18 2:19:18 PM*/ 2 | KISSY.add("kg/xlist/3.0.3/dataset",function(){var a=function(a){this.data=a&&a.data||[],this.id=a&&a.id||"_ds_"+Date.now()};return a.prototype.appendData=function(a){this.data=this.data.concat(a)},a.prototype.removeData=function(){this.data=[]},a.prototype.getData=function(){return this.data},a.prototype.setId=function(a){return a?(this.id=a,this.id):void 0},a.prototype.getId=function(){return this.id},a}); -------------------------------------------------------------------------------- /1.1.8/build/dataset.js: -------------------------------------------------------------------------------- 1 | /* 2 | combined files : 3 | 4 | kg/xlist/3.0.3/dataset 5 | 6 | */ 7 | ;KISSY.add('kg/xlist/3.0.3/dataset',function(S){ 8 | 9 | var DataSet = function(cfg){ 10 | 11 | this.data = cfg && cfg.data || []; 12 | 13 | this.id = cfg && cfg.id || "_ds_"+Date.now(); 14 | 15 | } 16 | 17 | DataSet.prototype.appendData = function(data){ 18 | this.data = this.data.concat(data) 19 | }; 20 | 21 | DataSet.prototype.removeData = function(){ 22 | this.data = []; 23 | }; 24 | 25 | DataSet.prototype.getData = function(){ 26 | return this.data; 27 | }; 28 | 29 | DataSet.prototype.setId = function(id){ 30 | if(!id) return; 31 | this.id = id; 32 | return this.id; 33 | }; 34 | 35 | DataSet.prototype.getId = function(){ 36 | return this.id; 37 | }; 38 | 39 | 40 | return DataSet; 41 | 42 | }) 43 | -------------------------------------------------------------------------------- /1.1.8/build/mods-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-09-18 2:19:18 PM*/ 2 | KISSY.config("modules",{"kg/xlist/3.0.3/index":{requires:["node","event","kg/xscroll/1.1.8/index","kg/xscroll/1.1.8/util"]}}); -------------------------------------------------------------------------------- /1.1.8/build/mods.js: -------------------------------------------------------------------------------- 1 | KISSY.config('modules', { 2 | 'kg/xlist/3.0.3/index': { requires: ['node', 'event', 'kg/xscroll/1.1.8/index', 'kg/xscroll/1.1.8/util']} 3 | }); -------------------------------------------------------------------------------- /1.1.8/demo/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "itemList": [{ 3 | "data":{ 4 | "num": 0 5 | } 6 | },{ 7 | "data":{ 8 | "num": 0 9 | } 10 | },{ 11 | "data":{ 12 | "num": 0 13 | } 14 | },{ 15 | "data":{ 16 | "num": 0 17 | } 18 | },{ 19 | "data":{ 20 | "num": 0 21 | } 22 | },{ 23 | "data":{ 24 | "num": 0 25 | } 26 | },{ 27 | "data":{ 28 | "num": 0 29 | } 30 | },{ 31 | "data":{ 32 | "num": 0 33 | } 34 | },{ 35 | "data":{ 36 | "num": 0 37 | } 38 | },{ 39 | "data":{ 40 | "num": 0 41 | } 42 | },{ 43 | "data":{ 44 | "num": 0 45 | } 46 | },{ 47 | "data":{ 48 | "num": 0 49 | } 50 | },{ 51 | "data":{ 52 | "num": 0 53 | } 54 | },{ 55 | "data":{ 56 | "num": 0 57 | } 58 | },{ 59 | "data":{ 60 | "num": 0 61 | } 62 | },{ 63 | "data":{ 64 | "num": 0 65 | } 66 | },{ 67 | "data":{ 68 | "num": 0 69 | } 70 | },{ 71 | "data":{ 72 | "num": 0 73 | } 74 | },{ 75 | "data":{ 76 | "num": 0 77 | } 78 | },{ 79 | "data":{ 80 | "num": 0 81 | } 82 | },{ 83 | "data":{ 84 | "num": 0 85 | } 86 | },{ 87 | "data":{ 88 | "num": 0 89 | } 90 | }] 91 | } -------------------------------------------------------------------------------- /1.1.8/demo/demo.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | -ms-touch-action: none; 9 | } 10 | 11 | body,ul,li { 12 | padding: 0; 13 | margin: 0; 14 | border: 0; 15 | } 16 | 17 | body { 18 | font-size: 12px; 19 | font-family: ubuntu, helvetica, arial; 20 | overflow: hidden; 21 | } 22 | 23 | #header { 24 | position: absolute; 25 | z-index: 2; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 45px; 30 | line-height: 45px; 31 | background: #f60; 32 | padding: 0; 33 | color: #eee; 34 | font-size: 20px; 35 | text-align: center; 36 | font-weight: bold; 37 | } 38 | 39 | #footer { 40 | position: absolute; 41 | z-index: 2; 42 | bottom: 0; 43 | left: 0; 44 | width: 100%; 45 | height: 48px; 46 | background: #444; 47 | padding: 0; 48 | border-top: 1px solid #444; 49 | line-height: 48px; 50 | color:#fff; 51 | text-align: center; 52 | } 53 | 54 | #J_List { 55 | position: absolute; 56 | z-index: 1; 57 | top: 45px; 58 | bottom: 48px; 59 | left: 0; 60 | width: 100%; 61 | background: #ccc; 62 | overflow: hidden; 63 | } 64 | 65 | .ks-xlist-container { 66 | position: absolute; 67 | z-index: 1; 68 | -webkit-tap-highlight-color: rgba(0,0,0,0); 69 | width: 100%; 70 | -webkit-transform: translateZ(0); 71 | -moz-transform: translateZ(0); 72 | -ms-transform: translateZ(0); 73 | -o-transform: translateZ(0); 74 | transform: translateZ(0); 75 | -webkit-touch-callout: none; 76 | -webkit-user-select: none; 77 | -moz-user-select: none; 78 | -ms-user-select: none; 79 | user-select: none; 80 | -webkit-text-size-adjust: none; 81 | -moz-text-size-adjust: none; 82 | -ms-text-size-adjust: none; 83 | -o-text-size-adjust: none; 84 | text-size-adjust: none; 85 | } 86 | 87 | .ks-xlist-container li { 88 | width: 100%; 89 | padding: 0 10px; 90 | height: 40px; 91 | line-height: 40px; 92 | border-bottom: 1px solid #ccc; 93 | border-top: 1px solid #fff; 94 | background-color: #fafafa; 95 | } 96 | .ks-xlist-content{ 97 | width: 100%; 98 | } 99 | .ks-xlist-plugin-pulldown-container{ 100 | text-align: center; 101 | width: 100%; 102 | line-height: 50px; 103 | } 104 | .ks-xlist-plugin-pulldown-up .up{ 105 | display: inline; 106 | } 107 | .ks-xlist-plugin-pulldown-up .down{ 108 | display: none; 109 | } 110 | .ks-xlist-plugin-pulldown-down .up{ 111 | display: none; 112 | } 113 | .ks-xlist-plugin-pulldown-down .down{ 114 | display: inline; 115 | } 116 | 117 | .ks-xlist-plugin-pullup-container{ 118 | line-height: 60px; 119 | text-align: center; 120 | } -------------------------------------------------------------------------------- /1.1.8/guide/dataset.md: -------------------------------------------------------------------------------- 1 | ## DataSet 2 | 3 | 代码示例 4 | 5 | ``` 6 | 7 | KISSY.use(kg/xlist/3.0.0/dataset",function(S,DataSet){ 8 | 9 | var ds = new DataSet(); 10 | 11 | ds.setId(124); 12 | 13 | ds.appendData({row:1}) 14 | 15 | ds.appendData([{row:2},{row:3}]) 16 | 17 | ds.removeData(ds.getId()); 18 | 19 | }) 20 | 21 | ``` 22 | ## Constructor 23 | 24 | ``` 25 | var ds = new DataSet({ 26 | id:"DS_1", 27 | data:[ 28 | {...}, 29 | {...} 30 | ] 31 | }) 32 | 33 | ``` 34 | 35 | ## Method 36 | 37 | ### appendData(Array) 38 | 39 | 插入数据 40 | 41 | ### removeData() 42 | 43 | 清空数据 44 | 45 | ### getData() 46 | 47 | 获取数据 48 | 49 | ### setId(id) 50 | 51 | 设置id 52 | 53 | ### getId() 54 | 55 | 获取id 56 | -------------------------------------------------------------------------------- /1.1.8/lib/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview 3 | * @author 4 | **/ 5 | KISSY.add(function (S, Node,Base) { 6 | var EMPTY = ''; 7 | var $ = Node.all; 8 | 9 | return Base.extend({ 10 | initializer:function(){ 11 | 12 | } 13 | },{ 14 | ATTRS:{ 15 | 16 | } 17 | }) 18 | }, {requires:['node', 'base']}); 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /1.1.8/meta/alias.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'kg/xlist/index': {alias: ['kg/xlist/2.0.0/index']} 3 | }); -------------------------------------------------------------------------------- /1.1.8/meta/modules.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'kg/xlist/index': {requires: ['node','base']} 3 | }); -------------------------------------------------------------------------------- /1.1.8/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xlist", 3 | "version": "3.0.3", 4 | "private": true, 5 | "devDependencies": { 6 | "grunt-contrib-uglify": "~0.2.0", 7 | "grunt": "~0.4.1", 8 | "grunt-kmc": "~0.1.1", 9 | "grunt-contrib-less": "~0.5.0", 10 | "grunt-contrib-copy": "", 11 | "grunt-contrib-clean": "~0.4.0", 12 | "grunt-contrib-cssmin": "~0.5.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /1.1.8/src/dataset.js: -------------------------------------------------------------------------------- 1 | ;KISSY.add(function(S){ 2 | 3 | var DataSet = function(cfg){ 4 | 5 | this.data = cfg && cfg.data || []; 6 | 7 | this.id = cfg && cfg.id || "_ds_"+Date.now(); 8 | 9 | } 10 | 11 | DataSet.prototype.appendData = function(data){ 12 | this.data = this.data.concat(data) 13 | }; 14 | 15 | DataSet.prototype.removeData = function(){ 16 | this.data = []; 17 | }; 18 | 19 | DataSet.prototype.getData = function(){ 20 | return this.data; 21 | }; 22 | 23 | DataSet.prototype.setId = function(id){ 24 | if(!id) return; 25 | this.id = id; 26 | return this.id; 27 | }; 28 | 29 | DataSet.prototype.getId = function(){ 30 | return this.id; 31 | }; 32 | 33 | 34 | return DataSet; 35 | 36 | }) -------------------------------------------------------------------------------- /1.1.8/test/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "itemList": [{ 3 | "data":{ 4 | "num": 0 5 | } 6 | },{ 7 | "data":{ 8 | "num": 0 9 | } 10 | },{ 11 | "data":{ 12 | "num": 0 13 | } 14 | },{ 15 | "data":{ 16 | "num": 0 17 | } 18 | },{ 19 | "data":{ 20 | "num": 0 21 | } 22 | },{ 23 | "data":{ 24 | "num": 0 25 | } 26 | },{ 27 | "data":{ 28 | "num": 0 29 | } 30 | },{ 31 | "data":{ 32 | "num": 0 33 | } 34 | },{ 35 | "data":{ 36 | "num": 0 37 | } 38 | },{ 39 | "data":{ 40 | "num": 0 41 | } 42 | },{ 43 | "data":{ 44 | "num": 0 45 | } 46 | },{ 47 | "data":{ 48 | "num": 0 49 | } 50 | },{ 51 | "data":{ 52 | "num": 0 53 | } 54 | },{ 55 | "data":{ 56 | "num": 0 57 | } 58 | },{ 59 | "data":{ 60 | "num": 0 61 | } 62 | },{ 63 | "data":{ 64 | "num": 0 65 | } 66 | },{ 67 | "data":{ 68 | "num": 0 69 | } 70 | },{ 71 | "data":{ 72 | "num": 0 73 | } 74 | },{ 75 | "data":{ 76 | "num": 0 77 | } 78 | },{ 79 | "data":{ 80 | "num": 0 81 | } 82 | },{ 83 | "data":{ 84 | "num": 0 85 | } 86 | },{ 87 | "data":{ 88 | "num": 0 89 | } 90 | }] 91 | } -------------------------------------------------------------------------------- /1.1.8/test/dataset.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /1.1.8/test/spec/index-spec.js: -------------------------------------------------------------------------------- 1 | KISSY.add(function (S, Node,Demo) { 2 | var $ = Node.all; 3 | describe('xlist', function () { 4 | it('Instantiation of components',function(){ 5 | var demo = new Demo(); 6 | expect(S.isObject(demo)).toBe(true); 7 | }) 8 | }); 9 | 10 | },{requires:['node','gallery/xlist/1.0/']}); -------------------------------------------------------------------------------- /1.1.8/totoro-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "runner":"./test/runner.html" 3 | } -------------------------------------------------------------------------------- /1.1/demo/demo.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | -ms-touch-action: none; 9 | } 10 | 11 | body,ul,li { 12 | padding: 0; 13 | margin: 0; 14 | border: 0; 15 | } 16 | 17 | body { 18 | font-size: 12px; 19 | font-family: ubuntu, helvetica, arial; 20 | overflow: hidden; 21 | } 22 | 23 | #header { 24 | position: absolute; 25 | z-index: 2; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 45px; 30 | line-height: 45px; 31 | background: #f60; 32 | padding: 0; 33 | color: #eee; 34 | font-size: 20px; 35 | text-align: center; 36 | font-weight: bold; 37 | } 38 | 39 | #footer { 40 | position: absolute; 41 | z-index: 2; 42 | bottom: 0; 43 | left: 0; 44 | width: 100%; 45 | height: 48px; 46 | background: #444; 47 | padding: 0; 48 | border-top: 1px solid #444; 49 | line-height: 48px; 50 | color:#fff; 51 | text-align: center; 52 | } 53 | 54 | #J_List { 55 | position: absolute; 56 | z-index: 1; 57 | top: 45px; 58 | bottom: 48px; 59 | left: 0; 60 | width: 100%; 61 | background: #ccc; 62 | overflow: hidden; 63 | } 64 | 65 | .ks-xlist-container { 66 | position: absolute; 67 | z-index: 1; 68 | -webkit-tap-highlight-color: rgba(0,0,0,0); 69 | width: 100%; 70 | -webkit-transform: translateZ(0); 71 | -moz-transform: translateZ(0); 72 | -ms-transform: translateZ(0); 73 | -o-transform: translateZ(0); 74 | transform: translateZ(0); 75 | -webkit-touch-callout: none; 76 | -webkit-user-select: none; 77 | -moz-user-select: none; 78 | -ms-user-select: none; 79 | user-select: none; 80 | -webkit-text-size-adjust: none; 81 | -moz-text-size-adjust: none; 82 | -ms-text-size-adjust: none; 83 | -o-text-size-adjust: none; 84 | text-size-adjust: none; 85 | } 86 | 87 | .ks-xlist-container { 88 | -webkit-backface-visibility:hidden; 89 | } 90 | 91 | .ks-xlist-container li { 92 | position: absolute; 93 | width: 100%; 94 | top: 0; 95 | left: 0; 96 | -webkit-transform: translateZ(0); 97 | -moz-transform: translateZ(0); 98 | -ms-transform: translateZ(0); 99 | -o-transform: translateZ(0); 100 | transform: translateZ(0); 101 | padding: 0 10px; 102 | height: 40px; 103 | line-height: 40px; 104 | border-bottom: 1px solid #ccc; 105 | border-top: 1px solid #fff; 106 | background-color: #fafafa; 107 | font-size: 16px; 108 | } 109 | 110 | .ks-xlist-plugin-pulldown-container{ 111 | text-align: center; 112 | width: 100%; 113 | line-height: 50px; 114 | } 115 | .ks-xlist-plugin-pulldown-up .up{ 116 | display: inline; 117 | } 118 | .ks-xlist-plugin-pulldown-up .down{ 119 | display: none; 120 | } 121 | .ks-xlist-plugin-pulldown-down .up{ 122 | display: none; 123 | } 124 | .ks-xlist-plugin-pulldown-down .down{ 125 | display: inline; 126 | } 127 | 128 | .ks-xlist-plugin-pullup-container{ 129 | line-height: 60px; 130 | text-align: center; 131 | } -------------------------------------------------------------------------------- /1.1/plugin/console.js: -------------------------------------------------------------------------------- 1 | KISSY.add("gallery/xlist/1.1/plugin/console",function(S,Node,Base){ 2 | var $ = S.all; 3 | var Console = Base.extend({ 4 | initializer:function(){ 5 | var self = this; 6 | var userConfig = self.userConfig; 7 | var xlist = userConfig.xlist; 8 | var $console = $("
        ").css({ 9 | "position": "absolute", 10 | "top":0, 11 | "width": "100%", 12 | "height": "75px", 13 | "background": "#000", 14 | "opacity":0.5, 15 | "right":0, 16 | "color":"#fff", 17 | "text-align": "center", 18 | "line-height":"25px", 19 | "z-index": 9999 20 | }).prependTo($("body")); 21 | var cache = Object.keys(xlist.__renderDomRecord).length; 22 | var visibleIndex = Object.keys(xlist.visibleIndex).toString(); 23 | $console.html("当前dom数 :"+ cache+"
        rows:"+visibleIndex); 24 | xlist.on("scroll",function(e){ 25 | var _visibleIndex = Object.keys(xlist.visibleIndex).toString(); 26 | if(_visibleIndex != visibleIndex){ 27 | var num = Object.keys(xlist.__renderDomRecord).length; 28 | $console.html("当前dom数 :"+ num+"
        rows:"+_visibleIndex +"
        itempool:"+xlist.itemPool.items.length); 29 | visibleIndex = _visibleIndex; 30 | } 31 | }) 32 | } 33 | }); 34 | 35 | return Console; 36 | 37 | },{ 38 | requires:['node','base'] 39 | }); 40 | -------------------------------------------------------------------------------- /1.1/plugin/fastscroll.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview 3 | * @author 伯才 4 | * @plugin fastscroll 加速滚动 5 | **/ 6 | ; 7 | KISSY.add("gallery/xlist/1.1/plugin/fastscroll",function(S, Base, Node) { 8 | var $ = S.all; 9 | //最小的滑动速度 10 | var MIN_DRAG_VELOCITY = 1; 11 | //最小间隔时间 超出则不计算 12 | var MAX_DURAITON = 500; 13 | //定义多少次滑动后进行速度叠加 14 | var DRAG_TIMES = 4; 15 | 16 | var MAX_SPEED = 15; 17 | 18 | var FastScroll = Base.extend({ 19 | initializer: function() { 20 | var self = this; 21 | var xlist = self.userConfig.xlist; 22 | self.dragRecords = []; 23 | //统计同方向快速滑动次数 24 | self.times = 0; 25 | xlist.on("dragEnd",function(e){ 26 | if(Math.abs(e.velocityY) > MIN_DRAG_VELOCITY){ 27 | self.dragRecords.push({ 28 | velocityY:e.velocityY, 29 | timeStamp:e.timeStamp 30 | }); 31 | self.times ++; 32 | }else{ 33 | self.reset(); 34 | } 35 | if(self.times >= DRAG_TIMES){ 36 | // console.log("times:",self.times,"加速","velocityY:",e.velocityY,"newVelocity:",Math.abs(e.velocityY)/e.velocityY * MAX_SPEED) 37 | xlist.dragEndHandler({ 38 | velocityY:Math.abs(e.velocityY)/e.velocityY * MAX_SPEED 39 | },true); 40 | } 41 | self.set("direction",xlist.direction) 42 | }) 43 | 44 | xlist.on("scrollEnd",function(e){ 45 | if(!xlist.isScrolling){ 46 | self.reset(); 47 | } 48 | }) 49 | 50 | xlist.on("dragStart",function(e){ 51 | if(xlist.isScrolling){ 52 | if(self.dragRecords.length){ 53 | //前一次时间 54 | var preTime = self.dragRecords.pop()['timeStamp']; 55 | if(e.timeStamp - preTime > MAX_DURAITON){ 56 | self.reset(); 57 | } 58 | } 59 | }else{ 60 | //清空数据 61 | self.dragRecords = []; 62 | } 63 | }) 64 | //滑动方向变化后复位 65 | self.on("afterDirectionChange",function(){ 66 | self.reset(); 67 | }) 68 | }, 69 | //清空数据 70 | reset:function(){ 71 | var self = this; 72 | self.dragRecords = []; 73 | self.times = 0; 74 | } 75 | }, { 76 | ATTRS: { 77 | 78 | } 79 | }) 80 | return FastScroll; 81 | 82 | }, { 83 | requires: ['base', 'node'] 84 | }); -------------------------------------------------------------------------------- /1.1/plugin/pullup.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview 3 | * @author 伯才 4 | * @plugin pullup XLIST上拉加载插件 5 | **/ 6 | ;KISSY.add("gallery/xlist/1.1/plugin/pullup",function(S, Base, Node) { 7 | var $ = S.all; 8 | var prefix; 9 | var containerCls; 10 | var content = "Pull Down To Refresh"; 11 | var loadingContent = "Loading..."; 12 | 13 | var PullUp = Base.extend({ 14 | initializer: function() { 15 | var self = this; 16 | var xlist = self.userConfig.xlist; 17 | self.userConfig = S.merge({ 18 | content: content, 19 | downContent: "", 20 | upContent: "", 21 | pullUpHeight:40, 22 | loadingContent: loadingContent, 23 | boundry:{}, 24 | prefix: "ks-xlist-plugin-pullup-" 25 | }, self.userConfig); 26 | var height = self.userConfig.height || 60; 27 | prefix = self.userConfig.prefix; 28 | // xlist.userConfig.boundry.bottom = height; 29 | xlist.on("afterRender",function(){ 30 | self.render() 31 | self._bindEvt(); 32 | }) 33 | 34 | 35 | 36 | }, 37 | render: function() { 38 | var self = this; 39 | var containerCls = prefix + "container"; 40 | var tpl = '
        '; 41 | var xlist = self.userConfig.xlist; 42 | var height = self.userConfig.height || 60; 43 | var $pullup = self.$pullup = $("
        ").addClass(containerCls).css({ 44 | "position":"absolute", 45 | "bottom":-height, 46 | "width":"100%" 47 | }).prependTo(xlist.$ctn); 48 | self.fire("afterRender"); 49 | }, 50 | _bindEvt:function(){ 51 | var self =this; 52 | if(self._evtBinded) return; 53 | var xlist= self.userConfig.xlist; 54 | var $pullup = self.$pullup; 55 | var offsetTop = 0; 56 | 57 | self.on("afterStatusChange", function(e) { 58 | $pullup.removeClass(prefix + e.prevVal).addClass(prefix + e.newVal); 59 | self.setContent(self.userConfig[e.newVal + "Content"]); 60 | }) 61 | 62 | $pullup.addClass(prefix + self.get("status")); 63 | $pullup.html(self.userConfig[self.get("status") + "Content"] || self.userConfig["content"]); 64 | 65 | xlist.on("drag", function(e) { 66 | offsetTop = xlist.getOffsetTop(); 67 | if (offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight) { 68 | //松开加载更多 69 | self.set("status","down") 70 | }else{ 71 | self.set("status","up") 72 | } 73 | }) 74 | 75 | xlist.on("scrollEnd",function(e){ 76 | offsetTop = e.offsetTop 77 | if(offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight){ 78 | self.set("status","loading"); 79 | self.fire("loading",function(){ 80 | 81 | }) 82 | } 83 | }) 84 | 85 | xlist.on("dataChange", function() { 86 | self.set("status","up") 87 | }) 88 | 89 | self._evtBinded = true; 90 | 91 | }, 92 | setContent: function(content) { 93 | var self = this; 94 | if (content){ 95 | self.$pullup.html(content); 96 | } 97 | } 98 | }, { 99 | ATTRS: { 100 | "status": { 101 | value: "up" 102 | } 103 | 104 | } 105 | }) 106 | 107 | return PullUp; 108 | 109 | 110 | }, { 111 | requires: ['base', 'node'] 112 | }); -------------------------------------------------------------------------------- /1.1/test/ansyc-floor.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | XList demo: infinite scrolling 8 | 9 | 10 | 32 |
        33 | 34 |
        35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /1.1/test/fast-scroll.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | XList demo: infinite scrolling 9 | 10 | 11 | 12 | 13 |
        14 |
          15 |
          16 | 17 | 18 | 19 | 69 | 70 | -------------------------------------------------------------------------------- /1.1/test/raf.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /1.1/test/raf.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 3 | var RAF = window.requestAnimationFrame || 4 | window.webkitRequestAnimationFrame || 5 | window.mozRequestAnimationFrame || 6 | window.oRequestAnimationFrame || 7 | window.msRequestAnimationFrame || 8 | function (callback) { window.setTimeout(callback, 1000 / 60); }; 9 | 10 | function animate(duration){ 11 | var start = Date.now(); 12 | var run = function(){ 13 | var now = Date.now(); 14 | if(now > start + duration){ 15 | console.log("finish") 16 | return; 17 | } 18 | console.log((now - start)/duration) 19 | RAF(run); 20 | } 21 | run(); 22 | } 23 | 24 | 25 | animate(1000); 26 | 27 | })() -------------------------------------------------------------------------------- /2.0.0/README.md: -------------------------------------------------------------------------------- 1 | ## xlist 2 | 3 | * 版本：2.0.0 4 | * 教程：[http://gallery.kissyui.com/xlist/2.0.0/guide/index.html](http://gallery.kissyui.com/xlist/2.0.0/guide/index.html) 5 | * demo：[http://gallery.kissyui.com/xlist/2.0.0/demo/index.html](http://gallery.kissyui.com/xlist/2.0.0/demo/index.html) 6 | 7 | ## changelog 8 | 9 | ### V2.0.0 10 | 11 | [!] 12 | 13 | 14 | -------------------------------------------------------------------------------- /2.0.0/build/drag-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("kg/xlist/2.0.0/drag",function(a){function b(a){return a.changedTouches.length>1?void(l=!0):(o=[],n={},n.startX=a.touches[0].clientX,n.startY=a.touches[0].clientY,n.deltaX=0,n.deltaY=0,a.touch=n,o.push({deltaX:n.deltaX,deltaY:n.deltaY,timeStamp:a.timeStamp}),a.deltaX=n.deltaX,a.deltaY=n.deltaY,void m(a.target).fire(g,a))}function c(a){a.changedTouches.length>1||(o.length?(n.deltaX=a.touches[0].clientX-n.startX,n.deltaY=a.touches[0].clientY-n.startY,a.touch=n,o.push({deltaX:n.deltaX,deltaY:n.deltaY,timeStamp:a.timeStamp}),a.deltaX=n.deltaX,a.deltaY=n.deltaY,a.velocityX=0,a.velocityY=0,a.isPropagationStopped()||m(a.target).fire(i,a)):(n={},n.startX=a.touches[0].clientX,n.startY=a.touches[0].clientY,n.deltaX=0,n.deltaY=0,a.touch=n,o.push({deltaX:n.deltaX,deltaY:n.deltaY,timeStamp:a.timeStamp}),a.deltaX=n.deltaX,a.deltaY=n.deltaY,m(a.target).fire(g,a)))}function d(a){var b=0,c=0,d=0;if(!(a.changedTouches.length>1)){n.deltaX=a.changedTouches[0].clientX-n.startX,n.deltaY=a.changedTouches[0].clientY-n.startY,a.deltaX=n.deltaX,a.deltaY=n.deltaY,a.touch=n,a.touch.record=o;var g=(a.touch.startX,a.touch.startY,o.length),i=o[0]&&o[0].timeStamp;if(!(2>g)&&i){{o[g-1].timeStamp-o[0].timeStamp}for(var j in o)j>0?(o[j].velocity=e(o[j].deltaX,o[j].deltaY,o[j-1].deltaX,o[j-1].deltaY)/(o[j].timeStamp-o[j-1].timeStamp),o[j].velocityX=(o[j].deltaX-o[j-1].deltaX)/(o[j].timeStamp-o[j-1].timeStamp),o[j].velocityY=(o[j].deltaY-o[j-1].deltaY)/(o[j].timeStamp-o[j-1].timeStamp)):(o[j].velocity=0,o[j].velocityX=0,o[j].velocityY=0);var l=o[0].velocityX/Math.abs(o[0].velocityX);for(var j in o)o[j].velocityX/Math.abs(o[j].velocityX)!=l&&(l=o[j].velocityX/Math.abs(o[j].velocityX),d=j);var p=o[0].velocityY/Math.abs(o[0].velocityY);for(var j in o)o[j].velocityY/Math.abs(o[j].velocityY)!=p&&(p=o[j].velocityY/Math.abs(o[j].velocityY),c=j);b=Math.max(d,c);{o[b]}a.touch.record=a.touch.record.splice(b-1);var q=f(a.touch.record);a.velocityX=Math.abs(q.velocityX)>k?q.velocityX/Math.abs(q.velocityX)*k:q.velocityX,a.velocityY=Math.abs(q.velocityY)>k?q.velocityY/Math.abs(q.velocityY)*k:q.velocityY,a.velocity=Math.sqrt(Math.pow(a.velocityX,2)+Math.pow(a.velocityY,2)),m(a.target).fire(h,a),n={},o=[]}}}function e(a,b,c,d){return Math.sqrt(Math.pow(c-a,2)+Math.pow(d-b,2))}function f(a){for(var b=0,c=0,d=a.length,e=0;d>e;e++)b+=a[e].velocityY,c+=a[e].velocityX;return b/=d,c/=d,{velocityY:Math.abs(a[d-1].velocityY)>j?b:0,velocityX:Math.abs(a[d-1].velocityX)>j?c:0}}var g=(window.document,"gestureDragStart"),h="gestureDragEnd",i="gestureDrag",j=.35,k=8,l=!1,m=a.all,n={},o=[];return a.each([i],function(e){a.Event.Special[e]={setup:function(){m(this).on("touchstart",b),m(this).on("touchmove",c),m(this).on("touchend",d)},teardown:function(){m(this).detach("touchstart",b),m(this).detach("touchmove",c),m(this).detach("touchend",d)}}}),{DRAG_START:g,DRAG:i,DRAG_END:h}},{requires:["node","event"]}); -------------------------------------------------------------------------------- /2.0.0/build/plugin/pulldown-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("gallery/xlist/1.0/plugin/pulldown",function(a,b){var c,d=a.all,e="Pull Down To Refresh",f="Loading...",g=b.extend({initializer:function(){var b=this,d=b.userConfig.xlist;b.userConfig=a.merge({content:e,downContent:"",upContent:"",loadingContent:f,prefix:"ks-xlist-plugin-pulldown-"},b.userConfig),c=b.userConfig.prefix,d&&d.on("afterRender",function(){b.render()})},render:function(){var a=this,b=c+"container",e='
          ',f=a.userConfig.xlist,g=a.userConfig.height||60,h=a.$pulldown=d(e).css({position:"absolute",width:"100%",height:g,top:-g}).prependTo(f.$ctn);a.on("afterStatusChange",function(b){h.removeClass(c+b.prevVal).addClass(c+b.newVal),a.setContent(a.userConfig[b.newVal+"Content"])}),h.addClass(c+a.get("status")),h.html(a.userConfig[a.get("status")+"Content"]||a.userConfig.content),a._bindEvt()},_bindEvt:function(){var a=this;if(!a._evtBinded){var b,c,d=a.userConfig.height||60,e=0;xlist.on("drag",function(){e=xlist.getOffsetTop(),e>0&&(Math.abs(e)d&&!a.isBoundryBounce&&"tapHold"!=f.originType&&(xlist.disableBoundryCheck(),xlist.scrollTo(-d,.4),xlist.isScrolling=!1,a.set("status","loading"),c=setTimeout(function(){xlist.enableBoundryCheck()},500),b=setTimeout(function(){location.reload()},700))}),a._evtBinded=!0}},setContent:function(a){var b=this;a&&b.$pulldown.html(a)}},{ATTRS:{status:{value:"down"}}});return g},{requires:["base","node"]}); -------------------------------------------------------------------------------- /2.0.0/build/plugin/pullup-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("gallery/xlist/1.0/plugin/pullup",function(a,b){var c,d=a.all,e="Pull Down To Refresh",f="Loading...",g=b.extend({initializer:function(){var b=this,d=b.userConfig.xlist;b.userConfig=a.merge({content:e,downContent:"",upContent:"",pullUpHeight:40,loadingContent:f,boundry:{},prefix:"ks-xlist-plugin-pullup-"},b.userConfig);b.userConfig.height||60;c=b.userConfig.prefix,d.on("afterRender",function(){b.render(),b._bindEvt()})},render:function(){{var a=this,b=c+"container",e=a.userConfig.xlist,f=a.userConfig.height||60;a.$pullup=d("
          ").addClass(b).css({position:"absolute",bottom:-f,width:"100%"}).prependTo(e.$ctn)}a.fire("afterRender")},_bindEvt:function(){var a=this;if(!a._evtBinded){var b=a.userConfig.xlist,d=a.$pullup,e=0;a.on("afterStatusChange",function(b){d.removeClass(c+b.prevVal).addClass(c+b.newVal),a.setContent(a.userConfig[b.newVal+"Content"])}),d.addClass(c+a.get("status")),d.html(a.userConfig[a.get("status")+"Content"]||a.userConfig.content),b.on("drag",function(){e=b.getOffsetTop(),e 4 | * @plugin pullup XLIST上拉加载插件 5 | **/ 6 | ;KISSY.add("gallery/xlist/1.0/plugin/pullup",function(S, Base, Node) { 7 | var $ = S.all; 8 | var prefix; 9 | var containerCls; 10 | var content = "Pull Down To Refresh"; 11 | var loadingContent = "Loading..."; 12 | 13 | var PullUp = Base.extend({ 14 | initializer: function() { 15 | var self = this; 16 | var xlist = self.userConfig.xlist; 17 | self.userConfig = S.merge({ 18 | content: content, 19 | downContent: "", 20 | upContent: "", 21 | pullUpHeight:40, 22 | loadingContent: loadingContent, 23 | boundry:{}, 24 | prefix: "ks-xlist-plugin-pullup-" 25 | }, self.userConfig); 26 | var height = self.userConfig.height || 60; 27 | prefix = self.userConfig.prefix; 28 | // xlist.userConfig.boundry.bottom = height; 29 | xlist.on("afterRender",function(){ 30 | self.render() 31 | self._bindEvt(); 32 | }) 33 | 34 | 35 | 36 | }, 37 | render: function() { 38 | var self = this; 39 | var containerCls = prefix + "container"; 40 | var tpl = '
          '; 41 | var xlist = self.userConfig.xlist; 42 | var height = self.userConfig.height || 60; 43 | var $pullup = self.$pullup = $("
          ").addClass(containerCls).css({ 44 | "position":"absolute", 45 | "bottom":-height, 46 | "width":"100%" 47 | }).prependTo(xlist.$ctn); 48 | self.fire("afterRender"); 49 | }, 50 | _bindEvt:function(){ 51 | var self =this; 52 | if(self._evtBinded) return; 53 | var xlist= self.userConfig.xlist; 54 | var $pullup = self.$pullup; 55 | var offsetTop = 0; 56 | 57 | self.on("afterStatusChange", function(e) { 58 | $pullup.removeClass(prefix + e.prevVal).addClass(prefix + e.newVal); 59 | self.setContent(self.userConfig[e.newVal + "Content"]); 60 | }) 61 | 62 | $pullup.addClass(prefix + self.get("status")); 63 | $pullup.html(self.userConfig[self.get("status") + "Content"] || self.userConfig["content"]); 64 | 65 | xlist.on("drag", function(e) { 66 | offsetTop = xlist.getOffsetTop(); 67 | if (offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight) { 68 | //松开加载更多 69 | self.set("status","down") 70 | }else{ 71 | self.set("status","up") 72 | } 73 | }) 74 | 75 | xlist.on("scrollEnd",function(e){ 76 | offsetTop = e.offsetTop 77 | if(offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight){ 78 | self.set("status","loading"); 79 | self.fire("loading",function(){ 80 | 81 | }) 82 | } 83 | }) 84 | 85 | xlist.on("dataChange", function() { 86 | self.set("status","up") 87 | }) 88 | 89 | self._evtBinded = true; 90 | 91 | }, 92 | setContent: function(content) { 93 | var self = this; 94 | if (content){ 95 | self.$pullup.html(content); 96 | } 97 | } 98 | }, { 99 | ATTRS: { 100 | "status": { 101 | value: "up" 102 | } 103 | 104 | } 105 | }) 106 | 107 | return PullUp; 108 | 109 | 110 | }, { 111 | requires: ['base', 'node'] 112 | }); -------------------------------------------------------------------------------- /2.0.0/build/plugin/scrollbar-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("gallery/xlist/1.0/plugin/scrollbar",function(a,b,c){var d=a.all,e=60,f=5,g=c.extend({initializer:function(){var b=this;b.userConfig=a.merge({},b.userConfig),b.xlist=b.userConfig.xlist,b.xlist.on("sync",function(){b.set("containerHeight",b.xlist.containerHeight),b.set("indicateHeight",b.xlist.height),b.set("offsetTop",b.xlist.getOffsetTop()),b.render(),b._bindEvt()})},render:function(){var a=this;if(!a.__isRender){a.__isRender=!0;var b=a.xlist,c="
          ";a.$scrollbar=d(c).css({width:"3px",position:"absolute",bottom:"2px",top:"2px",right:"2px",zIndex:999,overflow:"hidden","-webkit-border-radius":"2px"}).prependTo(b.$renderTo);var e="
          ";a.$indicate=d(e).css({"-webkit-box-sizing":"border-box",position:"absolute",background:"rgba(0,0,0,0.3)","-webkit-border-radius":"1.5px"}).prependTo(a.$scrollbar).css({width:"100%"}),a._update()}},_update:function(){var a=this,b=a.computeScrollBar(Math.abs(a.get("offsetTop")));a._moveTo(b.top),a.$indicate.height(b.height)},computeScrollBar:function(a){var b=this,a=a||0,c=b.get("indicateHeight"),d=b.get("containerHeight"),g=a/d,h=c*g,i=c*c/d,j=h*(c-e+i)/c;if(e>i&&(i=e,h=j),0>h)h=Math.abs(a)*i/e>i-f?f-i:a*i/e;else if(h+i>c){var k=a-d+c;h=k*i/e>i-f?c-f:c-i+k*i/e}return b.set("barOffsetTop",h),{height:i,top:h}},_scrollTo:function(a,b,c){var d=this;d.show(),d.$indicate[0].style.webkitTransform="translateY("+a+"px)",d.$indicate[0].style.webkitTransition=[b,"s ",c," 0"].join("")},_moveTo:function(a){var b=this;b.show(),b.$indicate[0].style.webkitTransform="translateY("+a+"px)",b.$indicate[0].style.webkitTransition=""},_bindEvt:function(){var a=this;a.__isEvtBind||(a.__isEvtBind=!0,a.xlist.on("drag",function(){a._moveTo(a.computeScrollBar(-a.xlist.getOffsetTop()).top)}),a.xlist.on("scrollTo",function(b){a._scrollTo(a.computeScrollBar(b.offsetTop).top,b.duration,b.easing)}),a.xlist.on("dragStart",function(){a.isBoundryBounce=!1}),a.xlist.on("outOfBoundry",function(){a.isBoundryBounce=!0}),a.xlist.on("scrollEnd",function(b){a.isBoundryBounce||"tapHold"==b.originType||a._moveTo(a.computeScrollBar(-a.xlist.getOffsetTop()).top)}),d(window).on("resize",function(){a._update()}),a.on("afterOffsetTopChange",function(){a._update()}),a.on("afterIndicateHeightChange",function(){a._update()}),a.on("afterContainerHeightChange",function(){a._update()}))},hide:function(){var a=this;a.$scrollbar.css({opacity:0}),a.$scrollbar[0].style.webkitTransition="opacity 0.3s ease-out"},show:function(){var a=this;a.$scrollbar.css({opacity:1})}},{ATTRS:{offsetTop:{value:0},containerHeight:{value:0},indicateHeight:{value:0},barHeight:{value:0},barOffsetTop:{value:0}}});return g},{requires:["node","base","anim"]}); -------------------------------------------------------------------------------- /2.0.0/build/tap-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("kg/xlist/2.0.0/tap",function(a){function b(){if(l.length>2){for(var a=[],b=1;bc?!0:!1}function d(){if(b(),1==l.length)return!1;var a=l[1].startTime-l[0].startTime;return k>a?!0:!1}function e(b){if(b.touches.length>1)return void(m=!1);var c=(b.currentTarget,b.target),d=b.changedTouches[0].clientX,e=b.changedTouches[0].clientY;m={startX:d,startY:e,startTime:Number(new Date),e:b},n&&clearTimeout(n);var c=b.target;n=setTimeout(function(){if(m){var f={};a.mix(f,b),a.mix(f,{type:"tapHold",pageX:d,pageY:e,originalEvent:b}),a.one(c).fire("tapHold",f)}clearTimeout(n)},j)}function f(e){if(m){var f=e.changedTouches[0].clientX,g=e.changedTouches[0].clientY,j=Math.abs(f-m.startX),n=Math.abs(g-m.startY);if(a.mix(m,{endX:f,endY:g,distance:Math.sqrt(j*j+n*n),timeSpan:Number(Number(new Date)-m.startTime)}),m.timeSpan>h)return void(m=!1);if(m.distance>i)return void(m=!1);if(!c(m)){l.push(m),b();var p={};a.mix(p,e),a.mix(p,{type:"tap",pageX:f,pageY:g,originalEvent:e});var q=e.target;return a.one(q).fire("tap",p),o?(d()&&(a.mix(p,{type:"doubleTap"}),a.one(q).fire("doubleTap",p)),clearTimeout(o),void(o=null)):void(o=setTimeout(function(){clearTimeout(o),o=null,a.mix(p,{type:"singleTap"}),a.one(q).fire("singleTap",p)},k))}}}var g=a.all,h=250,i=10,j=750,k=2.0.0,l=[],m=!1,n=null,o=null;a.each(["tap","tapHold","singleTap","doubleTap"],function(b){a.Event.Special[b]={setup:function(){g(this).on("touchstart",e),g(this).on("touchend",f)},teardown:function(){g(this).detach("touchstart",e),g(this).detach("touchend",f)}}})},{requires:["node","event"]}); -------------------------------------------------------------------------------- /2.0.0/demo/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "itemList": [{ 3 | "num": 0 4 | }, { 5 | "num": 1 6 | }, { 7 | "num": 2 8 | }, { 9 | "num": 3 10 | }, { 11 | "num": 4 12 | }, { 13 | "num": 5 14 | }, { 15 | "num": 6 16 | }, { 17 | "num": 7 18 | }, { 19 | "num": 8 20 | }, { 21 | "num": 9 22 | },{ 23 | "num": 10 24 | }, { 25 | "num": 11 26 | }, { 27 | "num": 12 28 | }, { 29 | "num": 13 30 | }, { 31 | "num": 14 32 | }, { 33 | "num": 15 34 | }, { 35 | "num": 16 36 | }, { 37 | "num": 17 38 | }, { 39 | "num": 18 40 | }, { 41 | "num": 19 42 | }] 43 | } -------------------------------------------------------------------------------- /2.0.0/demo/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | XList demo: infinite scrolling 9 | 10 | 11 | 12 | 13 |
          14 |
            15 |
            16 | 17 | 18 | 19 | 52 | 53 | -------------------------------------------------------------------------------- /2.0.0/demo/demo.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | -ms-touch-action: none; 9 | } 10 | 11 | body,ul,li { 12 | padding: 0; 13 | margin: 0; 14 | border: 0; 15 | } 16 | 17 | body { 18 | font-size: 12px; 19 | font-family: ubuntu, helvetica, arial; 20 | overflow: hidden; 21 | } 22 | 23 | #header { 24 | position: absolute; 25 | z-index: 2; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 45px; 30 | line-height: 45px; 31 | background: #f60; 32 | padding: 0; 33 | color: #eee; 34 | font-size: 20px; 35 | text-align: center; 36 | font-weight: bold; 37 | } 38 | 39 | #footer { 40 | position: absolute; 41 | z-index: 2; 42 | bottom: 0; 43 | left: 0; 44 | width: 100%; 45 | height: 48px; 46 | background: #444; 47 | padding: 0; 48 | border-top: 1px solid #444; 49 | line-height: 48px; 50 | color:#fff; 51 | text-align: center; 52 | } 53 | 54 | #J_List { 55 | position: absolute; 56 | z-index: 1; 57 | top: 45px; 58 | bottom: 48px; 59 | left: 0; 60 | width: 100%; 61 | background: #ccc; 62 | overflow: hidden; 63 | } 64 | 65 | .ks-xlist-container { 66 | position: absolute; 67 | z-index: 1; 68 | -webkit-tap-highlight-color: rgba(0,0,0,0); 69 | width: 100%; 70 | -webkit-transform: translateZ(0); 71 | -moz-transform: translateZ(0); 72 | -ms-transform: translateZ(0); 73 | -o-transform: translateZ(0); 74 | transform: translateZ(0); 75 | -webkit-touch-callout: none; 76 | -webkit-user-select: none; 77 | -moz-user-select: none; 78 | -ms-user-select: none; 79 | user-select: none; 80 | -webkit-text-size-adjust: none; 81 | -moz-text-size-adjust: none; 82 | -ms-text-size-adjust: none; 83 | -o-text-size-adjust: none; 84 | text-size-adjust: none; 85 | } 86 | 87 | .ks-xlist-container { 88 | -webkit-backface-visibility:hidden; 89 | } 90 | 91 | .ks-xlist-container li { 92 | position: absolute; 93 | width: 100%; 94 | top: 0; 95 | left: 0; 96 | -webkit-transform: translateZ(0); 97 | -moz-transform: translateZ(0); 98 | -ms-transform: translateZ(0); 99 | -o-transform: translateZ(0); 100 | transform: translateZ(0); 101 | padding: 0 10px; 102 | height: 40px; 103 | line-height: 40px; 104 | border-bottom: 1px solid #ccc; 105 | border-top: 1px solid #fff; 106 | background-color: #fafafa; 107 | font-size: 16px; 108 | } 109 | 110 | .ks-xlist-plugin-pulldown-container{ 111 | text-align: center; 112 | width: 100%; 113 | line-height: 50px; 114 | } 115 | .ks-xlist-plugin-pulldown-up .up{ 116 | display: inline; 117 | } 118 | .ks-xlist-plugin-pulldown-up .down{ 119 | display: none; 120 | } 121 | .ks-xlist-plugin-pulldown-down .up{ 122 | display: none; 123 | } 124 | .ks-xlist-plugin-pulldown-down .down{ 125 | display: inline; 126 | } 127 | 128 | .ks-xlist-plugin-pullup-container{ 129 | line-height: 60px; 130 | text-align: center; 131 | } -------------------------------------------------------------------------------- /2.0.0/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Xlist的demo 6 | 7 | 8 | 9 | 10 |

            Xlist的demo

            11 | 12 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /2.0.0/demo/pulldownrefresh.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | XList demo: infinite scrolling 9 | 10 | 11 | 12 | 13 |
            14 |
              15 |
              16 | 17 | 18 | 19 | 60 | 61 | -------------------------------------------------------------------------------- /2.0.0/demo/scrollbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | XList demo: infinite scrolling 9 | 10 | 11 | 12 | 13 |
              14 |
                15 |
                16 | 17 | 18 | 19 | 58 | 59 | -------------------------------------------------------------------------------- /2.0.0/guide/index.md: -------------------------------------------------------------------------------- 1 | ## 综述 2 | 3 | Xlist是基于html5的无尽下拉列表实现，适用于数据量大的html大列表，支持复杂的文档流类型，支持异步加载、刷新、滚动条等功能。 4 | 5 | * 版本：2.0.0 6 | * 作者：伯才 7 | * demo： 8 | ### 注意：以下demo请在移动设备上查看 9 | 10 | [最简demo](../demo/default.html) 11 | 12 | [滚动条.html](../demo/scrollbar.html) 13 | 14 | [下拉刷新.html](../demo/pulldownrefresh.html) 15 | 16 | [上拉分页-滚动条-下拉刷新.html](../demo/pagination.html) 17 | 18 | [异步楼层加载](../demo/async-floor.html) 19 | 20 | [聚划算wap简单demo](../demo/jhs.html) 21 | 22 | [聚划算ipad今日团list](http://ju.taobao.com/pad/normal.htm) 23 | 24 | ## 初始化组件 25 | 26 | S.use('kg/xlist/2.0.0/index', function (S, XList) { 27 | var xlist = new XList({ 28 | renderTo: "#J_List", 29 | data: data, 30 | template: '

                Xlist的demo {{num}}

                ', 31 | itemHeight: 50 //行高 32 | }); 33 | }) 34 | 35 | 36 | ## API说明 37 | 38 | ### Attribute 39 | 40 | #### renderTo 41 | 42 | { id|HTMLElement } 渲染的容器，需要设置容器的宽高，postion为relative或absolute 43 | 44 | #### itemHeight 45 | 46 | { Number } 列表项的高度 47 | 48 | #### data 49 | 50 | { Array } 初始化需要传入的数据 51 | 52 | #### autoRender 53 | 54 | { Boolean } 是否自动渲染，若设置为false，则需要手动调用render()方法 55 | 56 | #### translate3D 57 | 58 | { Boolean } 是否开启3Dtranslate以提高滚动性能 59 | 60 | #### stickies 61 | 62 | { Object } 黏在页面上伴随着滚动的元素列表，如:banner slide之类的非常规item 63 | 64 | - 键(key) 代表行号 如{1:{template:"{{demo}}",height:2.0.0}} 65 | - 值(value) {object} 66 | - template {string} 模板|html内容 KISSY.Template 67 | - height {number} 行高 68 | - type {number} 坑位类型 69 | 1、常规元素(不用设置) 70 | 2、不进行dom回收的非常规元素(默认为2，带有js的，如slide 等通过js处理的坑位) 71 | 72 | 73 | 74 | #### renderHook 75 | 76 | { Function } 返回e.element代表当前可用的节点 e.data代表当前行的数据 e.template代表默认模板（可自定义）KISSY.Template e.row代表当前屏幕可视区域内渲染的行号。 77 | 78 | 79 | #### SROLL_ACCELERATION 80 | 81 | { Float } 页面滚动阻尼系数，默认 0.002，值越小，摩擦力越小，页面滚动的距离越长。 82 | 83 | 84 | ### Method 85 | 86 | #### render() 87 | 88 | 渲染 89 | 90 | #### getOffsetTop() 91 | 92 | 获取页面顶部因滚动卷去的偏移量，向上为负数。 93 | 94 | #### scrollTo(offset,duration) 95 | 96 | 滚动到某个位置 97 | 98 | #### enableBoundryCheck() 99 | 100 | 滚动到顶部（底部）的回弹开关 101 | 102 | #### disableBoundryCheck() 103 | 104 | 滚动到顶部（底部）的回弹开关 105 | 106 | 107 | ### Event 108 | 109 | #### scroll 110 | 111 | 滚动时触发 112 | 113 | #### scrollEnd 114 | 115 | 滚动结束时触发 116 | 117 | #### afterRender 118 | 119 | 渲染结束后触发，该方法仅触发一次 120 | 121 | #### sync 122 | 123 | 每一次render()方法后触发 124 | 125 | #### dragStart 126 | 127 | 开始拖动页面前触发 128 | 129 | #### drag 130 | 131 | 拖动时触发 132 | 133 | #### dragEnd 134 | 135 | 拖动结束后触发，会包含速度矢量。 136 | 137 | #### outOfBoundry 138 | 139 | 上下越界回弹时触发 140 | 141 | 142 | 143 | ### Plugins 144 | 145 | #### scrollbar 146 | 147 | 滚动条插件 148 | 149 | #### pulldown 150 | 151 | 下拉刷新插件 152 | 153 | #### pullup 154 | 155 | 上拉加载插件 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /2.0.0/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackyang-hk/xlist/c026046eb46554db2c5ece290ea15b1749db6707/2.0.0/index.less -------------------------------------------------------------------------------- /2.0.0/lib/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview 3 | * @author 4 | **/ 5 | KISSY.add(function (S, Node,Base) { 6 | var EMPTY = ''; 7 | var $ = Node.all; 8 | 9 | return Base.extend({ 10 | initializer:function(){ 11 | 12 | } 13 | },{ 14 | ATTRS:{ 15 | 16 | } 17 | }) 18 | }, {requires:['node', 'base']}); 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /2.0.0/meta/alias.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'kg/xlist/index': {alias: ['kg/xlist/2.0.0/index']} 3 | }); -------------------------------------------------------------------------------- /2.0.0/meta/modules.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'kg/xlist/index': {requires: ['node','base']} 3 | }); -------------------------------------------------------------------------------- /2.0.0/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xlist", 3 | "version": "2.0.0", 4 | "private": true, 5 | "devDependencies": { 6 | "grunt-contrib-uglify": "~0.2.0", 7 | "grunt": "~0.4.1", 8 | "grunt-kmc": "~0.1.1", 9 | "grunt-contrib-less": "~0.5.0", 10 | "grunt-contrib-copy": "", 11 | "grunt-contrib-clean": "~0.4.0", 12 | "grunt-contrib-cssmin": "~0.5.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /2.0.0/plugin/pullup.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview 3 | * @author 伯才 4 | * @plugin pullup XLIST上拉加载插件 5 | **/ 6 | ;KISSY.add("kg/xlist/2.0.0/plugin/pullup",function(S, Base, Node) { 7 | var $ = S.all; 8 | var prefix; 9 | var containerCls; 10 | var content = "Pull Down To Refresh"; 11 | var loadingContent = "Loading..."; 12 | 13 | var PullUp = Base.extend({ 14 | initializer: function() { 15 | var self = this; 16 | var xlist = self.userConfig.xlist; 17 | self.userConfig = S.merge({ 18 | content: content, 19 | downContent: "", 20 | upContent: "", 21 | pullUpHeight:40, 22 | loadingContent: loadingContent, 23 | boundry:{}, 24 | prefix: "ks-xlist-plugin-pullup-" 25 | }, self.userConfig); 26 | var height = self.userConfig.height || 60; 27 | prefix = self.userConfig.prefix; 28 | // xlist.userConfig.boundry.bottom = height; 29 | xlist.on("afterRender",function(){ 30 | self.render() 31 | self._bindEvt(); 32 | }) 33 | 34 | 35 | 36 | }, 37 | render: function() { 38 | var self = this; 39 | var containerCls = prefix + "container"; 40 | var tpl = '
                '; 41 | var xlist = self.userConfig.xlist; 42 | var height = self.userConfig.height || 60; 43 | var $pullup = self.$pullup = $("
                ").addClass(containerCls).css({ 44 | "position":"absolute", 45 | "bottom":-height, 46 | "width":"2.0.0%" 47 | }).prependTo(xlist.$ctn); 48 | self.fire("afterRender"); 49 | }, 50 | _bindEvt:function(){ 51 | var self =this; 52 | if(self._evtBinded) return; 53 | var xlist= self.userConfig.xlist; 54 | var $pullup = self.$pullup; 55 | var offsetTop = 0; 56 | 57 | self.on("afterStatusChange", function(e) { 58 | $pullup.removeClass(prefix + e.prevVal).addClass(prefix + e.newVal); 59 | self.setContent(self.userConfig[e.newVal + "Content"]); 60 | }) 61 | 62 | $pullup.addClass(prefix + self.get("status")); 63 | $pullup.html(self.userConfig[self.get("status") + "Content"] || self.userConfig["content"]); 64 | 65 | xlist.on("drag", function(e) { 66 | offsetTop = xlist.getOffsetTop(); 67 | if (offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight) { 68 | //松开加载更多 69 | self.set("status","down") 70 | }else{ 71 | self.set("status","up") 72 | } 73 | }) 74 | 75 | xlist.on("scrollEnd",function(e){ 76 | offsetTop = e.offsetTop 77 | if(offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight){ 78 | self.set("status","loading"); 79 | self.fire("loading",function(){ 80 | 81 | }) 82 | } 83 | }) 84 | 85 | xlist.on("dataChange", function() { 86 | self.set("status","up") 87 | }) 88 | 89 | self._evtBinded = true; 90 | 91 | }, 92 | setContent: function(content) { 93 | var self = this; 94 | if (content){ 95 | self.$pullup.html(content); 96 | } 97 | } 98 | }, { 99 | ATTRS: { 100 | "status": { 101 | value: "up" 102 | } 103 | 104 | } 105 | }) 106 | 107 | return PullUp; 108 | 109 | 110 | }, { 111 | requires: ['base', 'node'] 112 | }); -------------------------------------------------------------------------------- /2.0.0/test/data.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | function genData(floorId,num){ 3 | var data = []; 4 | for(var i =0;i 2 | 3 | 4 | 5 | 6 | Runner 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /2.0.0/test/runner.js: -------------------------------------------------------------------------------- 1 | KISSY.add(function(){ 2 | //在这里requires需要运行的用例文件 3 | 4 | 5 | },{requires:['test/spec/index-spec']}) -------------------------------------------------------------------------------- /2.0.0/test/spec/index-spec.js: -------------------------------------------------------------------------------- 1 | KISSY.add(function (S, Node,Demo) { 2 | var $ = Node.all; 3 | describe('xlist', function () { 4 | it('Instantiation of components',function(){ 5 | var demo = new Demo(); 6 | expect(S.isObject(demo)).toBe(true); 7 | }) 8 | }); 9 | 10 | },{requires:['node','gallery/xlist/1.0/']}); -------------------------------------------------------------------------------- /2.0.0/totoro-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "runner":"./test/runner.html" 3 | } -------------------------------------------------------------------------------- /3.0.0/README.md: -------------------------------------------------------------------------------- 1 | ## xlist 2 | 3 | * 版本：3.0.0 4 | * 教程：[http://gallery.kissyui.com/xlist/3.0.0/guide/index.html](http://gallery.kissyui.com/xlist/3.0.0/guide/index.html) 5 | * demo：[http://gallery.kissyui.com/xlist/3.0.0/demo/index.html](http://gallery.kissyui.com/xlist/3.0.0/demo/index.html) 6 | 7 | ## changelog 8 | 9 | ### V3.0.0 10 | 11 | - 原始数据格式调整，增加数据样式等描述 12 | - 重用dom数固定，通过infiniteElements配置 13 | - 新增DataSet数据集 14 | - renderHook参数调整，无需return 15 | - 支持任意高度元素回收 16 | - 支持position:sticky 17 | - 性能优化 18 | - panstart事件定义为发生移动才出发，区分touchstart 19 | - 支持同步渲染 20 | - 移除autoRender配置，默认不渲染，需要手动render() 21 | 22 | -------------------------------------------------------------------------------- /3.0.0/build/dataset-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-09-02 4:03:24 PM*/ 2 | KISSY.add("kg/xlist/3.0.0/dataset",function(){var a=function(a){this.data=a&&a.data||[],this.id=a&&a.id||"_ds_"+Date.now()};return a.prototype.appendData=function(a){this.data=this.data.concat(a)},a.prototype.removeData=function(){this.data=[]},a.prototype.getData=function(){return this.data},a.prototype.setId=function(a){return a?(this.id=a,this.id):void 0},a.prototype.getId=function(){return this.id},a}); -------------------------------------------------------------------------------- /3.0.0/build/dataset.js: -------------------------------------------------------------------------------- 1 | /* 2 | combined files : 3 | 4 | kg/xlist/3.0.0/dataset 5 | 6 | */ 7 | ;KISSY.add('kg/xlist/3.0.0/dataset',function(S){ 8 | 9 | var DataSet = function(cfg){ 10 | 11 | this.data = cfg && cfg.data || []; 12 | 13 | this.id = cfg && cfg.id || "_ds_"+Date.now(); 14 | 15 | } 16 | 17 | DataSet.prototype.appendData = function(data){ 18 | this.data = this.data.concat(data) 19 | }; 20 | 21 | DataSet.prototype.removeData = function(){ 22 | this.data = []; 23 | }; 24 | 25 | DataSet.prototype.getData = function(){ 26 | return this.data; 27 | }; 28 | 29 | DataSet.prototype.setId = function(id){ 30 | if(!id) return; 31 | this.id = id; 32 | return this.id; 33 | }; 34 | 35 | DataSet.prototype.getId = function(){ 36 | return this.id; 37 | }; 38 | 39 | 40 | return DataSet; 41 | 42 | }) 43 | -------------------------------------------------------------------------------- /3.0.0/build/drag-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("kg/xlist/2.0.0/drag",function(a){function b(a){return a.changedTouches.length>1?void(l=!0):(o=[],n={},n.startX=a.touches[0].clientX,n.startY=a.touches[0].clientY,n.deltaX=0,n.deltaY=0,a.touch=n,o.push({deltaX:n.deltaX,deltaY:n.deltaY,timeStamp:a.timeStamp}),a.deltaX=n.deltaX,a.deltaY=n.deltaY,void m(a.target).fire(g,a))}function c(a){a.changedTouches.length>1||(o.length?(n.deltaX=a.touches[0].clientX-n.startX,n.deltaY=a.touches[0].clientY-n.startY,a.touch=n,o.push({deltaX:n.deltaX,deltaY:n.deltaY,timeStamp:a.timeStamp}),a.deltaX=n.deltaX,a.deltaY=n.deltaY,a.velocityX=0,a.velocityY=0,a.isPropagationStopped()||m(a.target).fire(i,a)):(n={},n.startX=a.touches[0].clientX,n.startY=a.touches[0].clientY,n.deltaX=0,n.deltaY=0,a.touch=n,o.push({deltaX:n.deltaX,deltaY:n.deltaY,timeStamp:a.timeStamp}),a.deltaX=n.deltaX,a.deltaY=n.deltaY,m(a.target).fire(g,a)))}function d(a){var b=0,c=0,d=0;if(!(a.changedTouches.length>1)){n.deltaX=a.changedTouches[0].clientX-n.startX,n.deltaY=a.changedTouches[0].clientY-n.startY,a.deltaX=n.deltaX,a.deltaY=n.deltaY,a.touch=n,a.touch.record=o;var g=(a.touch.startX,a.touch.startY,o.length),i=o[0]&&o[0].timeStamp;if(!(2>g)&&i){{o[g-1].timeStamp-o[0].timeStamp}for(var j in o)j>0?(o[j].velocity=e(o[j].deltaX,o[j].deltaY,o[j-1].deltaX,o[j-1].deltaY)/(o[j].timeStamp-o[j-1].timeStamp),o[j].velocityX=(o[j].deltaX-o[j-1].deltaX)/(o[j].timeStamp-o[j-1].timeStamp),o[j].velocityY=(o[j].deltaY-o[j-1].deltaY)/(o[j].timeStamp-o[j-1].timeStamp)):(o[j].velocity=0,o[j].velocityX=0,o[j].velocityY=0);var l=o[0].velocityX/Math.abs(o[0].velocityX);for(var j in o)o[j].velocityX/Math.abs(o[j].velocityX)!=l&&(l=o[j].velocityX/Math.abs(o[j].velocityX),d=j);var p=o[0].velocityY/Math.abs(o[0].velocityY);for(var j in o)o[j].velocityY/Math.abs(o[j].velocityY)!=p&&(p=o[j].velocityY/Math.abs(o[j].velocityY),c=j);b=Math.max(d,c);{o[b]}a.touch.record=a.touch.record.splice(b-1);var q=f(a.touch.record);a.velocityX=Math.abs(q.velocityX)>k?q.velocityX/Math.abs(q.velocityX)*k:q.velocityX,a.velocityY=Math.abs(q.velocityY)>k?q.velocityY/Math.abs(q.velocityY)*k:q.velocityY,a.velocity=Math.sqrt(Math.pow(a.velocityX,2)+Math.pow(a.velocityY,2)),m(a.target).fire(h,a),n={},o=[]}}}function e(a,b,c,d){return Math.sqrt(Math.pow(c-a,2)+Math.pow(d-b,2))}function f(a){for(var b=0,c=0,d=a.length,e=0;d>e;e++)b+=a[e].velocityY,c+=a[e].velocityX;return b/=d,c/=d,{velocityY:Math.abs(a[d-1].velocityY)>j?b:0,velocityX:Math.abs(a[d-1].velocityX)>j?c:0}}var g=(window.document,"gestureDragStart"),h="gestureDragEnd",i="gestureDrag",j=.35,k=8,l=!1,m=a.all,n={},o=[];return a.each([i],function(e){a.Event.Special[e]={setup:function(){m(this).on("touchstart",b),m(this).on("touchmove",c),m(this).on("touchend",d)},teardown:function(){m(this).detach("touchstart",b),m(this).detach("touchmove",c),m(this).detach("touchend",d)}}}),{DRAG_START:g,DRAG:i,DRAG_END:h}},{requires:["node","event"]}); -------------------------------------------------------------------------------- /3.0.0/build/mods-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-09-02 4:03:24 PM*/ 2 | KISSY.config("modules",{"kg/xlist/3.0.0/index":{requires:["node","event","kg/xscroll/1.1.4/index","kg/xscroll/1.1.4/util"]}}); -------------------------------------------------------------------------------- /3.0.0/build/mods.js: -------------------------------------------------------------------------------- 1 | KISSY.config('modules', { 2 | 'kg/xlist/3.0.0/index': { requires: ['node', 'event', 'kg/xscroll/1.1.4/index', 'kg/xscroll/1.1.4/util']} 3 | }); -------------------------------------------------------------------------------- /3.0.0/build/plugin/pulldown-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("gallery/xlist/1.0/plugin/pulldown",function(a,b){var c,d=a.all,e="Pull Down To Refresh",f="Loading...",g=b.extend({initializer:function(){var b=this,d=b.userConfig.xlist;b.userConfig=a.merge({content:e,downContent:"",upContent:"",loadingContent:f,prefix:"ks-xlist-plugin-pulldown-"},b.userConfig),c=b.userConfig.prefix,d&&d.on("afterRender",function(){b.render()})},render:function(){var a=this,b=c+"container",e='
                ',f=a.userConfig.xlist,g=a.userConfig.height||60,h=a.$pulldown=d(e).css({position:"absolute",width:"100%",height:g,top:-g}).prependTo(f.$ctn);a.on("afterStatusChange",function(b){h.removeClass(c+b.prevVal).addClass(c+b.newVal),a.setContent(a.userConfig[b.newVal+"Content"])}),h.addClass(c+a.get("status")),h.html(a.userConfig[a.get("status")+"Content"]||a.userConfig.content),a._bindEvt()},_bindEvt:function(){var a=this;if(!a._evtBinded){var b,c,d=a.userConfig.height||60,e=0;xlist.on("drag",function(){e=xlist.getOffsetTop(),e>0&&(Math.abs(e)d&&!a.isBoundryBounce&&"tapHold"!=f.originType&&(xlist.disableBoundryCheck(),xlist.scrollTo(-d,.4),xlist.isScrolling=!1,a.set("status","loading"),c=setTimeout(function(){xlist.enableBoundryCheck()},500),b=setTimeout(function(){location.reload()},700))}),a._evtBinded=!0}},setContent:function(a){var b=this;a&&b.$pulldown.html(a)}},{ATTRS:{status:{value:"down"}}});return g},{requires:["base","node"]}); -------------------------------------------------------------------------------- /3.0.0/build/plugin/pullup-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("gallery/xlist/1.0/plugin/pullup",function(a,b){var c,d=a.all,e="Pull Down To Refresh",f="Loading...",g=b.extend({initializer:function(){var b=this,d=b.userConfig.xlist;b.userConfig=a.merge({content:e,downContent:"",upContent:"",pullUpHeight:40,loadingContent:f,boundry:{},prefix:"ks-xlist-plugin-pullup-"},b.userConfig);b.userConfig.height||60;c=b.userConfig.prefix,d.on("afterRender",function(){b.render(),b._bindEvt()})},render:function(){{var a=this,b=c+"container",e=a.userConfig.xlist,f=a.userConfig.height||60;a.$pullup=d("
                ").addClass(b).css({position:"absolute",bottom:-f,width:"100%"}).prependTo(e.$ctn)}a.fire("afterRender")},_bindEvt:function(){var a=this;if(!a._evtBinded){var b=a.userConfig.xlist,d=a.$pullup,e=0;a.on("afterStatusChange",function(b){d.removeClass(c+b.prevVal).addClass(c+b.newVal),a.setContent(a.userConfig[b.newVal+"Content"])}),d.addClass(c+a.get("status")),d.html(a.userConfig[a.get("status")+"Content"]||a.userConfig.content),b.on("drag",function(){e=b.getOffsetTop(),e 4 | * @plugin pullup XLIST上拉加载插件 5 | **/ 6 | ;KISSY.add("gallery/xlist/1.0/plugin/pullup",function(S, Base, Node) { 7 | var $ = S.all; 8 | var prefix; 9 | var containerCls; 10 | var content = "Pull Down To Refresh"; 11 | var loadingContent = "Loading..."; 12 | 13 | var PullUp = Base.extend({ 14 | initializer: function() { 15 | var self = this; 16 | var xlist = self.userConfig.xlist; 17 | self.userConfig = S.merge({ 18 | content: content, 19 | downContent: "", 20 | upContent: "", 21 | pullUpHeight:40, 22 | loadingContent: loadingContent, 23 | boundry:{}, 24 | prefix: "ks-xlist-plugin-pullup-" 25 | }, self.userConfig); 26 | var height = self.userConfig.height || 60; 27 | prefix = self.userConfig.prefix; 28 | // xlist.userConfig.boundry.bottom = height; 29 | xlist.on("afterRender",function(){ 30 | self.render() 31 | self._bindEvt(); 32 | }) 33 | 34 | 35 | 36 | }, 37 | render: function() { 38 | var self = this; 39 | var containerCls = prefix + "container"; 40 | var tpl = '
                '; 41 | var xlist = self.userConfig.xlist; 42 | var height = self.userConfig.height || 60; 43 | var $pullup = self.$pullup = $("
                ").addClass(containerCls).css({ 44 | "position":"absolute", 45 | "bottom":-height, 46 | "width":"100%" 47 | }).prependTo(xlist.$ctn); 48 | self.fire("afterRender"); 49 | }, 50 | _bindEvt:function(){ 51 | var self =this; 52 | if(self._evtBinded) return; 53 | var xlist= self.userConfig.xlist; 54 | var $pullup = self.$pullup; 55 | var offsetTop = 0; 56 | 57 | self.on("afterStatusChange", function(e) { 58 | $pullup.removeClass(prefix + e.prevVal).addClass(prefix + e.newVal); 59 | self.setContent(self.userConfig[e.newVal + "Content"]); 60 | }) 61 | 62 | $pullup.addClass(prefix + self.get("status")); 63 | $pullup.html(self.userConfig[self.get("status") + "Content"] || self.userConfig["content"]); 64 | 65 | xlist.on("drag", function(e) { 66 | offsetTop = xlist.getOffsetTop(); 67 | if (offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight) { 68 | //松开加载更多 69 | self.set("status","down") 70 | }else{ 71 | self.set("status","up") 72 | } 73 | }) 74 | 75 | xlist.on("scrollEnd",function(e){ 76 | offsetTop = e.offsetTop 77 | if(offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight){ 78 | self.set("status","loading"); 79 | self.fire("loading",function(){ 80 | 81 | }) 82 | } 83 | }) 84 | 85 | xlist.on("dataChange", function() { 86 | self.set("status","up") 87 | }) 88 | 89 | self._evtBinded = true; 90 | 91 | }, 92 | setContent: function(content) { 93 | var self = this; 94 | if (content){ 95 | self.$pullup.html(content); 96 | } 97 | } 98 | }, { 99 | ATTRS: { 100 | "status": { 101 | value: "up" 102 | } 103 | 104 | } 105 | }) 106 | 107 | return PullUp; 108 | 109 | 110 | }, { 111 | requires: ['base', 'node'] 112 | }); -------------------------------------------------------------------------------- /3.0.0/build/plugin/scrollbar-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("gallery/xlist/1.0/plugin/scrollbar",function(a,b,c){var d=a.all,e=60,f=5,g=c.extend({initializer:function(){var b=this;b.userConfig=a.merge({},b.userConfig),b.xlist=b.userConfig.xlist,b.xlist.on("sync",function(){b.set("containerHeight",b.xlist.containerHeight),b.set("indicateHeight",b.xlist.height),b.set("offsetTop",b.xlist.getOffsetTop()),b.render(),b._bindEvt()})},render:function(){var a=this;if(!a.__isRender){a.__isRender=!0;var b=a.xlist,c="
                ";a.$scrollbar=d(c).css({width:"3px",position:"absolute",bottom:"2px",top:"2px",right:"2px",zIndex:999,overflow:"hidden","-webkit-border-radius":"2px"}).prependTo(b.$renderTo);var e="
                ";a.$indicate=d(e).css({"-webkit-box-sizing":"border-box",position:"absolute",background:"rgba(0,0,0,0.3)","-webkit-border-radius":"1.5px"}).prependTo(a.$scrollbar).css({width:"100%"}),a._update()}},_update:function(){var a=this,b=a.computeScrollBar(Math.abs(a.get("offsetTop")));a._moveTo(b.top),a.$indicate.height(b.height)},computeScrollBar:function(a){var b=this,a=a||0,c=b.get("indicateHeight"),d=b.get("containerHeight"),g=a/d,h=c*g,i=c*c/d,j=h*(c-e+i)/c;if(e>i&&(i=e,h=j),0>h)h=Math.abs(a)*i/e>i-f?f-i:a*i/e;else if(h+i>c){var k=a-d+c;h=k*i/e>i-f?c-f:c-i+k*i/e}return b.set("barOffsetTop",h),{height:i,top:h}},_scrollTo:function(a,b,c){var d=this;d.show(),d.$indicate[0].style.webkitTransform="translateY("+a+"px)",d.$indicate[0].style.webkitTransition=[b,"s ",c," 0"].join("")},_moveTo:function(a){var b=this;b.show(),b.$indicate[0].style.webkitTransform="translateY("+a+"px)",b.$indicate[0].style.webkitTransition=""},_bindEvt:function(){var a=this;a.__isEvtBind||(a.__isEvtBind=!0,a.xlist.on("drag",function(){a._moveTo(a.computeScrollBar(-a.xlist.getOffsetTop()).top)}),a.xlist.on("scrollTo",function(b){a._scrollTo(a.computeScrollBar(b.offsetTop).top,b.duration,b.easing)}),a.xlist.on("dragStart",function(){a.isBoundryBounce=!1}),a.xlist.on("outOfBoundry",function(){a.isBoundryBounce=!0}),a.xlist.on("scrollEnd",function(b){a.isBoundryBounce||"tapHold"==b.originType||a._moveTo(a.computeScrollBar(-a.xlist.getOffsetTop()).top)}),d(window).on("resize",function(){a._update()}),a.on("afterOffsetTopChange",function(){a._update()}),a.on("afterIndicateHeightChange",function(){a._update()}),a.on("afterContainerHeightChange",function(){a._update()}))},hide:function(){var a=this;a.$scrollbar.css({opacity:0}),a.$scrollbar[0].style.webkitTransition="opacity 0.3s ease-out"},show:function(){var a=this;a.$scrollbar.css({opacity:1})}},{ATTRS:{offsetTop:{value:0},containerHeight:{value:0},indicateHeight:{value:0},barHeight:{value:0},barOffsetTop:{value:0}}});return g},{requires:["node","base","anim"]}); -------------------------------------------------------------------------------- /3.0.0/build/tap-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("kg/xlist/2.0.0/tap",function(a){function b(){if(l.length>2){for(var a=[],b=1;bc?!0:!1}function d(){if(b(),1==l.length)return!1;var a=l[1].startTime-l[0].startTime;return k>a?!0:!1}function e(b){if(b.touches.length>1)return void(m=!1);var c=(b.currentTarget,b.target),d=b.changedTouches[0].clientX,e=b.changedTouches[0].clientY;m={startX:d,startY:e,startTime:Number(new Date),e:b},n&&clearTimeout(n);var c=b.target;n=setTimeout(function(){if(m){var f={};a.mix(f,b),a.mix(f,{type:"tapHold",pageX:d,pageY:e,originalEvent:b}),a.one(c).fire("tapHold",f)}clearTimeout(n)},j)}function f(e){if(m){var f=e.changedTouches[0].clientX,g=e.changedTouches[0].clientY,j=Math.abs(f-m.startX),n=Math.abs(g-m.startY);if(a.mix(m,{endX:f,endY:g,distance:Math.sqrt(j*j+n*n),timeSpan:Number(Number(new Date)-m.startTime)}),m.timeSpan>h)return void(m=!1);if(m.distance>i)return void(m=!1);if(!c(m)){l.push(m),b();var p={};a.mix(p,e),a.mix(p,{type:"tap",pageX:f,pageY:g,originalEvent:e});var q=e.target;return a.one(q).fire("tap",p),o?(d()&&(a.mix(p,{type:"doubleTap"}),a.one(q).fire("doubleTap",p)),clearTimeout(o),void(o=null)):void(o=setTimeout(function(){clearTimeout(o),o=null,a.mix(p,{type:"singleTap"}),a.one(q).fire("singleTap",p)},k))}}}var g=a.all,h=250,i=10,j=750,k=2.0.0,l=[],m=!1,n=null,o=null;a.each(["tap","tapHold","singleTap","doubleTap"],function(b){a.Event.Special[b]={setup:function(){g(this).on("touchstart",e),g(this).on("touchend",f)},teardown:function(){g(this).detach("touchstart",e),g(this).detach("touchend",f)}}})},{requires:["node","event"]}); -------------------------------------------------------------------------------- /3.0.0/demo/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "itemList": [{ 3 | "data":{ 4 | "num": 0 5 | } 6 | },{ 7 | "data":{ 8 | "num": 0 9 | } 10 | },{ 11 | "data":{ 12 | "num": 0 13 | } 14 | },{ 15 | "data":{ 16 | "num": 0 17 | } 18 | },{ 19 | "data":{ 20 | "num": 0 21 | } 22 | },{ 23 | "data":{ 24 | "num": 0 25 | } 26 | },{ 27 | "data":{ 28 | "num": 0 29 | } 30 | },{ 31 | "data":{ 32 | "num": 0 33 | } 34 | },{ 35 | "data":{ 36 | "num": 0 37 | } 38 | },{ 39 | "data":{ 40 | "num": 0 41 | } 42 | },{ 43 | "data":{ 44 | "num": 0 45 | } 46 | },{ 47 | "data":{ 48 | "num": 0 49 | } 50 | },{ 51 | "data":{ 52 | "num": 0 53 | } 54 | },{ 55 | "data":{ 56 | "num": 0 57 | } 58 | },{ 59 | "data":{ 60 | "num": 0 61 | } 62 | },{ 63 | "data":{ 64 | "num": 0 65 | } 66 | },{ 67 | "data":{ 68 | "num": 0 69 | } 70 | },{ 71 | "data":{ 72 | "num": 0 73 | } 74 | },{ 75 | "data":{ 76 | "num": 0 77 | } 78 | },{ 79 | "data":{ 80 | "num": 0 81 | } 82 | },{ 83 | "data":{ 84 | "num": 0 85 | } 86 | },{ 87 | "data":{ 88 | "num": 0 89 | } 90 | }] 91 | } -------------------------------------------------------------------------------- /3.0.0/demo/demo.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | -ms-touch-action: none; 9 | } 10 | 11 | body,ul,li { 12 | padding: 0; 13 | margin: 0; 14 | border: 0; 15 | } 16 | 17 | body { 18 | font-size: 12px; 19 | font-family: ubuntu, helvetica, arial; 20 | overflow: hidden; 21 | } 22 | 23 | #header { 24 | position: absolute; 25 | z-index: 2; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 45px; 30 | line-height: 45px; 31 | background: #f60; 32 | padding: 0; 33 | color: #eee; 34 | font-size: 20px; 35 | text-align: center; 36 | font-weight: bold; 37 | } 38 | 39 | #footer { 40 | position: absolute; 41 | z-index: 2; 42 | bottom: 0; 43 | left: 0; 44 | width: 100%; 45 | height: 48px; 46 | background: #444; 47 | padding: 0; 48 | border-top: 1px solid #444; 49 | line-height: 48px; 50 | color:#fff; 51 | text-align: center; 52 | } 53 | 54 | #J_List { 55 | position: absolute; 56 | z-index: 1; 57 | top: 45px; 58 | bottom: 48px; 59 | left: 0; 60 | width: 100%; 61 | background: #ccc; 62 | overflow: hidden; 63 | } 64 | 65 | .ks-xlist-container { 66 | position: absolute; 67 | z-index: 1; 68 | -webkit-tap-highlight-color: rgba(0,0,0,0); 69 | width: 100%; 70 | -webkit-transform: translateZ(0); 71 | -moz-transform: translateZ(0); 72 | -ms-transform: translateZ(0); 73 | -o-transform: translateZ(0); 74 | transform: translateZ(0); 75 | -webkit-touch-callout: none; 76 | -webkit-user-select: none; 77 | -moz-user-select: none; 78 | -ms-user-select: none; 79 | user-select: none; 80 | -webkit-text-size-adjust: none; 81 | -moz-text-size-adjust: none; 82 | -ms-text-size-adjust: none; 83 | -o-text-size-adjust: none; 84 | text-size-adjust: none; 85 | } 86 | 87 | .ks-xlist-container li { 88 | width: 100%; 89 | padding: 0 10px; 90 | height: 40px; 91 | line-height: 40px; 92 | border-bottom: 1px solid #ccc; 93 | border-top: 1px solid #fff; 94 | background-color: #fafafa; 95 | } 96 | .ks-xlist-content{ 97 | width: 100%; 98 | } 99 | .ks-xlist-plugin-pulldown-container{ 100 | text-align: center; 101 | width: 100%; 102 | line-height: 50px; 103 | } 104 | .ks-xlist-plugin-pulldown-up .up{ 105 | display: inline; 106 | } 107 | .ks-xlist-plugin-pulldown-up .down{ 108 | display: none; 109 | } 110 | .ks-xlist-plugin-pulldown-down .up{ 111 | display: none; 112 | } 113 | .ks-xlist-plugin-pulldown-down .down{ 114 | display: inline; 115 | } 116 | 117 | .ks-xlist-plugin-pullup-container{ 118 | line-height: 60px; 119 | text-align: center; 120 | } -------------------------------------------------------------------------------- /3.0.0/demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Xlist的demo 6 | 7 | 8 | 9 | 10 |

                Xlist的demo

                11 | 12 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /3.0.0/demo/scrollbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | scrollbar 9 | 10 | 11 | 12 | 13 |
                14 |
                15 |
                  16 | 17 |
                18 |
                19 |
                20 | 21 | 22 | 23 | 60 | 61 | -------------------------------------------------------------------------------- /3.0.0/demo/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 35 | 36 |
                37 |
                38 |
                  39 | 40 |
                41 |
                42 |
                43 | 44 | 84 | 85 | -------------------------------------------------------------------------------- /3.0.0/guide/dataset.md: -------------------------------------------------------------------------------- 1 | ## DataSet 2 | 3 | 代码示例 4 | 5 | ``` 6 | 7 | KISSY.use(kg/xlist/3.0.0/dataset",function(S,DataSet){ 8 | 9 | var ds = new DataSet(); 10 | 11 | ds.setId(124); 12 | 13 | ds.appendData({row:1}) 14 | 15 | ds.appendData([{row:2},{row:3}]) 16 | 17 | ds.removeData(ds.getId()); 18 | 19 | }) 20 | 21 | ``` 22 | ## Constructor 23 | 24 | ``` 25 | var ds = new DataSet({ 26 | id:"DS_1", 27 | data:[ 28 | {...}, 29 | {...} 30 | ] 31 | }) 32 | 33 | ``` 34 | 35 | ## Method 36 | 37 | ### appendData(Array) 38 | 39 | 插入数据 40 | 41 | ### removeData() 42 | 43 | 清空数据 44 | 45 | ### getData() 46 | 47 | 获取数据 48 | 49 | ### setId(id) 50 | 51 | 设置id 52 | 53 | ### getId() 54 | 55 | 获取id 56 | -------------------------------------------------------------------------------- /3.0.0/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackyang-hk/xlist/c026046eb46554db2c5ece290ea15b1749db6707/3.0.0/index.less -------------------------------------------------------------------------------- /3.0.0/lib/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview 3 | * @author 4 | **/ 5 | KISSY.add(function (S, Node,Base) { 6 | var EMPTY = ''; 7 | var $ = Node.all; 8 | 9 | return Base.extend({ 10 | initializer:function(){ 11 | 12 | } 13 | },{ 14 | ATTRS:{ 15 | 16 | } 17 | }) 18 | }, {requires:['node', 'base']}); 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /3.0.0/meta/alias.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'kg/xlist/index': {alias: ['kg/xlist/2.0.0/index']} 3 | }); -------------------------------------------------------------------------------- /3.0.0/meta/modules.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'kg/xlist/index': {requires: ['node','base']} 3 | }); -------------------------------------------------------------------------------- /3.0.0/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xlist", 3 | "version": "3.0.0", 4 | "private": true, 5 | "devDependencies": { 6 | "grunt-contrib-uglify": "~0.2.0", 7 | "grunt": "~0.4.1", 8 | "grunt-kmc": "~0.1.1", 9 | "grunt-contrib-less": "~0.5.0", 10 | "grunt-contrib-copy": "", 11 | "grunt-contrib-clean": "~0.4.0", 12 | "grunt-contrib-cssmin": "~0.5.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /3.0.0/plugin/pullup.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview 3 | * @author 伯才 4 | * @plugin pullup XLIST上拉加载插件 5 | **/ 6 | ;KISSY.add("kg/xlist/2.0.0/plugin/pullup",function(S, Base, Node) { 7 | var $ = S.all; 8 | var prefix; 9 | var containerCls; 10 | var content = "Pull Down To Refresh"; 11 | var loadingContent = "Loading..."; 12 | 13 | var PullUp = Base.extend({ 14 | initializer: function() { 15 | var self = this; 16 | var xlist = self.userConfig.xlist; 17 | self.userConfig = S.merge({ 18 | content: content, 19 | downContent: "", 20 | upContent: "", 21 | pullUpHeight:40, 22 | loadingContent: loadingContent, 23 | boundry:{}, 24 | prefix: "ks-xlist-plugin-pullup-" 25 | }, self.userConfig); 26 | var height = self.userConfig.height || 60; 27 | prefix = self.userConfig.prefix; 28 | // xlist.userConfig.boundry.bottom = height; 29 | xlist.on("afterRender",function(){ 30 | self.render() 31 | self._bindEvt(); 32 | }) 33 | 34 | 35 | 36 | }, 37 | render: function() { 38 | var self = this; 39 | var containerCls = prefix + "container"; 40 | var tpl = '
                '; 41 | var xlist = self.userConfig.xlist; 42 | var height = self.userConfig.height || 60; 43 | var $pullup = self.$pullup = $("
                ").addClass(containerCls).css({ 44 | "position":"absolute", 45 | "bottom":-height, 46 | "width":"2.0.0%" 47 | }).prependTo(xlist.$ctn); 48 | self.fire("afterRender"); 49 | }, 50 | _bindEvt:function(){ 51 | var self =this; 52 | if(self._evtBinded) return; 53 | var xlist= self.userConfig.xlist; 54 | var $pullup = self.$pullup; 55 | var offsetTop = 0; 56 | 57 | self.on("afterStatusChange", function(e) { 58 | $pullup.removeClass(prefix + e.prevVal).addClass(prefix + e.newVal); 59 | self.setContent(self.userConfig[e.newVal + "Content"]); 60 | }) 61 | 62 | $pullup.addClass(prefix + self.get("status")); 63 | $pullup.html(self.userConfig[self.get("status") + "Content"] || self.userConfig["content"]); 64 | 65 | xlist.on("drag", function(e) { 66 | offsetTop = xlist.getOffsetTop(); 67 | if (offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight) { 68 | //松开加载更多 69 | self.set("status","down") 70 | }else{ 71 | self.set("status","up") 72 | } 73 | }) 74 | 75 | xlist.on("scrollEnd",function(e){ 76 | offsetTop = e.offsetTop 77 | if(offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight){ 78 | self.set("status","loading"); 79 | self.fire("loading",function(){ 80 | 81 | }) 82 | } 83 | }) 84 | 85 | xlist.on("dataChange", function() { 86 | self.set("status","up") 87 | }) 88 | 89 | self._evtBinded = true; 90 | 91 | }, 92 | setContent: function(content) { 93 | var self = this; 94 | if (content){ 95 | self.$pullup.html(content); 96 | } 97 | } 98 | }, { 99 | ATTRS: { 100 | "status": { 101 | value: "up" 102 | } 103 | 104 | } 105 | }) 106 | 107 | return PullUp; 108 | 109 | 110 | }, { 111 | requires: ['base', 'node'] 112 | }); -------------------------------------------------------------------------------- /3.0.0/src/dataset.js: -------------------------------------------------------------------------------- 1 | ;KISSY.add(function(S){ 2 | 3 | var DataSet = function(cfg){ 4 | 5 | this.data = cfg && cfg.data || []; 6 | 7 | this.id = cfg && cfg.id || "_ds_"+Date.now(); 8 | 9 | } 10 | 11 | DataSet.prototype.appendData = function(data){ 12 | this.data = this.data.concat(data) 13 | }; 14 | 15 | DataSet.prototype.removeData = function(){ 16 | this.data = []; 17 | }; 18 | 19 | DataSet.prototype.getData = function(){ 20 | return this.data; 21 | }; 22 | 23 | DataSet.prototype.setId = function(id){ 24 | if(!id) return; 25 | this.id = id; 26 | return this.id; 27 | }; 28 | 29 | DataSet.prototype.getId = function(){ 30 | return this.id; 31 | }; 32 | 33 | 34 | return DataSet; 35 | 36 | }) -------------------------------------------------------------------------------- /3.0.0/test/data.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | function genData(floorId,num){ 3 | var data = []; 4 | for(var i =0;i 2 | 3 | -------------------------------------------------------------------------------- /3.0.0/test/runner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Runner 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /3.0.0/test/runner.js: -------------------------------------------------------------------------------- 1 | KISSY.add(function(){ 2 | //在这里requires需要运行的用例文件 3 | 4 | 5 | },{requires:['test/spec/index-spec']}) -------------------------------------------------------------------------------- /3.0.0/test/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 11 | 35 | 36 |
                37 |
                38 |
                  39 | 40 |
                41 |
                42 |
                43 | 44 | 84 | 85 | -------------------------------------------------------------------------------- /3.0.0/test/spec/index-spec.js: -------------------------------------------------------------------------------- 1 | KISSY.add(function (S, Node,Demo) { 2 | var $ = Node.all; 3 | describe('xlist', function () { 4 | it('Instantiation of components',function(){ 5 | var demo = new Demo(); 6 | expect(S.isObject(demo)).toBe(true); 7 | }) 8 | }); 9 | 10 | },{requires:['node','gallery/xlist/1.0/']}); -------------------------------------------------------------------------------- /3.0.0/totoro-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "runner":"./test/runner.html" 3 | } -------------------------------------------------------------------------------- /3.0.1/README.md: -------------------------------------------------------------------------------- 1 | ## xlist 2 | 3 | * 版本：3.0.0 4 | * 教程：[http://gallery.kissyui.com/xlist/3.0.0/guide/index.html](http://gallery.kissyui.com/xlist/3.0.0/guide/index.html) 5 | 6 | ## changelog 7 | 8 | ### V1.0 9 | 10 | * 修复下拉刷新长按时触发刷新的bug 11 | * 优化误操作点击时打开超链接的bug 12 | * 优化滚动条回弹效果 13 | * render方法可强制更新渲染可视范围内已渲染的节点 14 | * 修复scrollTo不带duration参数时无止境回调scroll事件的bug 15 | * 修复scrollTo滚动高度未发生变化不回调scrollEnd事件的bug 16 | * 修复滚动条下边界回弹bug 17 | * 重写tap事件，方便进行事件互斥 18 | 19 | 20 | ### V1.1 21 | 22 | * 动画单位统一至ms 23 | * dragStart、drag、dragEnd事件统一成panStart、pan、panEnd 24 | * 去除sync()方法，采用render()重新渲染即可 25 | * 解耦dom回收更新机制，RequestAnimateFrame替代setTimeout方案 26 | * 去除stickies配置 合并到data 新的数据源格式：受保护字段recycled、template、height可自定义配置（防止数据中有重复字段） 27 | * 数据分组 setDataWithGroup(data,groupId) groupId可为空 则默认从0开始计数 28 | * 新增console插件，方便查看dom数量、行号及dom池数量，调试时直接plug()即可 29 | * 新增maxBufferedNum配置项，用于配制可视范围内的行余量。 30 | 31 | ### v2.0.0 32 | 33 | * 配合kissy gallery社区升级，目前2.0.0不可用，请使用v3.0以上版本！ 34 | 35 | ### V3.0.0 36 | 37 | * 原始数据格式调整，增加数据样式等描述 38 | * 重用dom数固定，通过infiniteElements配置 39 | * 新增DataSet数据集 40 | * renderHook参数调整，无需return 41 | * 支持任意高度元素回收 42 | * 支持position:sticky 43 | * 性能优化 44 | * panstart事件定义为发生移动才出发，区分touchstart 45 | * 支持同步渲染 46 | * 移除autoRender配置，默认不渲染，需要手动render() 47 | 48 | ### V3.0.1 49 | 50 | * 父类XScroll升级1.1.5 51 | 52 | -------------------------------------------------------------------------------- /3.0.1/build/dataset-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-09-04 7:24:44 PM*/ 2 | KISSY.add("kg/xlist/3.0.1/dataset",function(){var a=function(a){this.data=a&&a.data||[],this.id=a&&a.id||"_ds_"+Date.now()};return a.prototype.appendData=function(a){this.data=this.data.concat(a)},a.prototype.removeData=function(){this.data=[]},a.prototype.getData=function(){return this.data},a.prototype.setId=function(a){return a?(this.id=a,this.id):void 0},a.prototype.getId=function(){return this.id},a}); -------------------------------------------------------------------------------- /3.0.1/build/dataset.js: -------------------------------------------------------------------------------- 1 | /* 2 | combined files : 3 | 4 | kg/xlist/3.0.1/dataset 5 | 6 | */ 7 | ;KISSY.add('kg/xlist/3.0.1/dataset',function(S){ 8 | 9 | var DataSet = function(cfg){ 10 | 11 | this.data = cfg && cfg.data || []; 12 | 13 | this.id = cfg && cfg.id || "_ds_"+Date.now(); 14 | 15 | } 16 | 17 | DataSet.prototype.appendData = function(data){ 18 | this.data = this.data.concat(data) 19 | }; 20 | 21 | DataSet.prototype.removeData = function(){ 22 | this.data = []; 23 | }; 24 | 25 | DataSet.prototype.getData = function(){ 26 | return this.data; 27 | }; 28 | 29 | DataSet.prototype.setId = function(id){ 30 | if(!id) return; 31 | this.id = id; 32 | return this.id; 33 | }; 34 | 35 | DataSet.prototype.getId = function(){ 36 | return this.id; 37 | }; 38 | 39 | 40 | return DataSet; 41 | 42 | }) 43 | -------------------------------------------------------------------------------- /3.0.1/build/mods-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-09-04 7:24:44 PM*/ 2 | KISSY.config("modules",{"kg/xlist/3.0.1/index":{requires:["node","event","kg/xscroll/1.1.5/index","kg/xscroll/1.1.5/util"]}}); -------------------------------------------------------------------------------- /3.0.1/build/mods.js: -------------------------------------------------------------------------------- 1 | KISSY.config('modules', { 2 | 'kg/xlist/3.0.1/index': { requires: ['node', 'event', 'kg/xscroll/1.1.5/index', 'kg/xscroll/1.1.5/util']} 3 | }); -------------------------------------------------------------------------------- /3.0.1/demo/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "itemList": [{ 3 | "data":{ 4 | "num": 0 5 | } 6 | },{ 7 | "data":{ 8 | "num": 0 9 | } 10 | },{ 11 | "data":{ 12 | "num": 0 13 | } 14 | },{ 15 | "data":{ 16 | "num": 0 17 | } 18 | },{ 19 | "data":{ 20 | "num": 0 21 | } 22 | },{ 23 | "data":{ 24 | "num": 0 25 | } 26 | },{ 27 | "data":{ 28 | "num": 0 29 | } 30 | },{ 31 | "data":{ 32 | "num": 0 33 | } 34 | },{ 35 | "data":{ 36 | "num": 0 37 | } 38 | },{ 39 | "data":{ 40 | "num": 0 41 | } 42 | },{ 43 | "data":{ 44 | "num": 0 45 | } 46 | },{ 47 | "data":{ 48 | "num": 0 49 | } 50 | },{ 51 | "data":{ 52 | "num": 0 53 | } 54 | },{ 55 | "data":{ 56 | "num": 0 57 | } 58 | },{ 59 | "data":{ 60 | "num": 0 61 | } 62 | },{ 63 | "data":{ 64 | "num": 0 65 | } 66 | },{ 67 | "data":{ 68 | "num": 0 69 | } 70 | },{ 71 | "data":{ 72 | "num": 0 73 | } 74 | },{ 75 | "data":{ 76 | "num": 0 77 | } 78 | },{ 79 | "data":{ 80 | "num": 0 81 | } 82 | },{ 83 | "data":{ 84 | "num": 0 85 | } 86 | },{ 87 | "data":{ 88 | "num": 0 89 | } 90 | }] 91 | } -------------------------------------------------------------------------------- /3.0.1/demo/demo.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | -ms-touch-action: none; 9 | } 10 | 11 | body,ul,li { 12 | padding: 0; 13 | margin: 0; 14 | border: 0; 15 | } 16 | 17 | body { 18 | font-size: 12px; 19 | font-family: ubuntu, helvetica, arial; 20 | overflow: hidden; 21 | } 22 | 23 | #header { 24 | position: absolute; 25 | z-index: 2; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 45px; 30 | line-height: 45px; 31 | background: #f60; 32 | padding: 0; 33 | color: #eee; 34 | font-size: 20px; 35 | text-align: center; 36 | font-weight: bold; 37 | } 38 | 39 | #footer { 40 | position: absolute; 41 | z-index: 2; 42 | bottom: 0; 43 | left: 0; 44 | width: 100%; 45 | height: 48px; 46 | background: #444; 47 | padding: 0; 48 | border-top: 1px solid #444; 49 | line-height: 48px; 50 | color:#fff; 51 | text-align: center; 52 | } 53 | 54 | #J_List { 55 | position: absolute; 56 | z-index: 1; 57 | top: 45px; 58 | bottom: 48px; 59 | left: 0; 60 | width: 100%; 61 | background: #ccc; 62 | overflow: hidden; 63 | } 64 | 65 | .ks-xlist-container { 66 | position: absolute; 67 | z-index: 1; 68 | -webkit-tap-highlight-color: rgba(0,0,0,0); 69 | width: 100%; 70 | -webkit-transform: translateZ(0); 71 | -moz-transform: translateZ(0); 72 | -ms-transform: translateZ(0); 73 | -o-transform: translateZ(0); 74 | transform: translateZ(0); 75 | -webkit-touch-callout: none; 76 | -webkit-user-select: none; 77 | -moz-user-select: none; 78 | -ms-user-select: none; 79 | user-select: none; 80 | -webkit-text-size-adjust: none; 81 | -moz-text-size-adjust: none; 82 | -ms-text-size-adjust: none; 83 | -o-text-size-adjust: none; 84 | text-size-adjust: none; 85 | } 86 | 87 | .ks-xlist-container li { 88 | width: 100%; 89 | padding: 0 10px; 90 | height: 40px; 91 | line-height: 40px; 92 | border-bottom: 1px solid #ccc; 93 | border-top: 1px solid #fff; 94 | background-color: #fafafa; 95 | } 96 | .ks-xlist-content{ 97 | width: 100%; 98 | } 99 | .ks-xlist-plugin-pulldown-container{ 100 | text-align: center; 101 | width: 100%; 102 | line-height: 50px; 103 | } 104 | .ks-xlist-plugin-pulldown-up .up{ 105 | display: inline; 106 | } 107 | .ks-xlist-plugin-pulldown-up .down{ 108 | display: none; 109 | } 110 | .ks-xlist-plugin-pulldown-down .up{ 111 | display: none; 112 | } 113 | .ks-xlist-plugin-pulldown-down .down{ 114 | display: inline; 115 | } 116 | 117 | .ks-xlist-plugin-pullup-container{ 118 | line-height: 60px; 119 | text-align: center; 120 | } -------------------------------------------------------------------------------- /3.0.1/guide/dataset.md: -------------------------------------------------------------------------------- 1 | ## DataSet 2 | 3 | 代码示例 4 | 5 | ``` 6 | 7 | KISSY.use(kg/xlist/3.0.0/dataset",function(S,DataSet){ 8 | 9 | var ds = new DataSet(); 10 | 11 | ds.setId(124); 12 | 13 | ds.appendData({row:1}) 14 | 15 | ds.appendData([{row:2},{row:3}]) 16 | 17 | ds.removeData(ds.getId()); 18 | 19 | }) 20 | 21 | ``` 22 | ## Constructor 23 | 24 | ``` 25 | var ds = new DataSet({ 26 | id:"DS_1", 27 | data:[ 28 | {...}, 29 | {...} 30 | ] 31 | }) 32 | 33 | ``` 34 | 35 | ## Method 36 | 37 | ### appendData(Array) 38 | 39 | 插入数据 40 | 41 | ### removeData() 42 | 43 | 清空数据 44 | 45 | ### getData() 46 | 47 | 获取数据 48 | 49 | ### setId(id) 50 | 51 | 设置id 52 | 53 | ### getId() 54 | 55 | 获取id 56 | -------------------------------------------------------------------------------- /3.0.1/lib/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview 3 | * @author 4 | **/ 5 | KISSY.add(function (S, Node,Base) { 6 | var EMPTY = ''; 7 | var $ = Node.all; 8 | 9 | return Base.extend({ 10 | initializer:function(){ 11 | 12 | } 13 | },{ 14 | ATTRS:{ 15 | 16 | } 17 | }) 18 | }, {requires:['node', 'base']}); 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /3.0.1/meta/alias.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'kg/xlist/index': {alias: ['kg/xlist/2.0.0/index']} 3 | }); -------------------------------------------------------------------------------- /3.0.1/meta/modules.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'kg/xlist/index': {requires: ['node','base']} 3 | }); -------------------------------------------------------------------------------- /3.0.1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xlist", 3 | "version": "3.0.1", 4 | "private": true, 5 | "devDependencies": { 6 | "grunt-contrib-uglify": "~0.2.0", 7 | "grunt": "~0.4.1", 8 | "grunt-kmc": "~0.1.1", 9 | "grunt-contrib-less": "~0.5.0", 10 | "grunt-contrib-copy": "", 11 | "grunt-contrib-clean": "~0.4.0", 12 | "grunt-contrib-cssmin": "~0.5.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /3.0.1/src/dataset.js: -------------------------------------------------------------------------------- 1 | ;KISSY.add(function(S){ 2 | 3 | var DataSet = function(cfg){ 4 | 5 | this.data = cfg && cfg.data || []; 6 | 7 | this.id = cfg && cfg.id || "_ds_"+Date.now(); 8 | 9 | } 10 | 11 | DataSet.prototype.appendData = function(data){ 12 | this.data = this.data.concat(data) 13 | }; 14 | 15 | DataSet.prototype.removeData = function(){ 16 | this.data = []; 17 | }; 18 | 19 | DataSet.prototype.getData = function(){ 20 | return this.data; 21 | }; 22 | 23 | DataSet.prototype.setId = function(id){ 24 | if(!id) return; 25 | this.id = id; 26 | return this.id; 27 | }; 28 | 29 | DataSet.prototype.getId = function(){ 30 | return this.id; 31 | }; 32 | 33 | 34 | return DataSet; 35 | 36 | }) -------------------------------------------------------------------------------- /3.0.1/test/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "itemList": [{ 3 | "num": 0 4 | }, { 5 | "num": 1 6 | }, { 7 | "num": 2 8 | }, { 9 | "num": 3 10 | }, { 11 | "num": 4 12 | }, { 13 | "num": 5 14 | }, { 15 | "num": 6 16 | }, { 17 | "num": 7 18 | }, { 19 | "num": 8 20 | }, { 21 | "num": 9 22 | },{ 23 | "num": 10 24 | }, { 25 | "num": 11 26 | }, { 27 | "num": 12 28 | }, { 29 | "num": 13 30 | }, { 31 | "num": 14 32 | }, { 33 | "num": 15 34 | }, { 35 | "num": 16 36 | }, { 37 | "num": 17 38 | }, { 39 | "num": 18 40 | }, { 41 | "num": 19 42 | }] 43 | } -------------------------------------------------------------------------------- /3.0.1/test/dataset.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /3.0.1/test/spec/index-spec.js: -------------------------------------------------------------------------------- 1 | KISSY.add(function (S, Node,Demo) { 2 | var $ = Node.all; 3 | describe('xlist', function () { 4 | it('Instantiation of components',function(){ 5 | var demo = new Demo(); 6 | expect(S.isObject(demo)).toBe(true); 7 | }) 8 | }); 9 | 10 | },{requires:['node','gallery/xlist/1.0/']}); -------------------------------------------------------------------------------- /3.0.1/totoro-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "runner":"./test/runner.html" 3 | } -------------------------------------------------------------------------------- /3.0.2/README.md: -------------------------------------------------------------------------------- 1 | ## xlist 2 | 3 | * 版本：3.0.0 4 | * 教程：[http://gallery.kissyui.com/xlist/3.0.0/guide/index.html](http://gallery.kissyui.com/xlist/3.0.0/guide/index.html) 5 | 6 | ## changelog 7 | 8 | ### V1.0 9 | 10 | * 修复下拉刷新长按时触发刷新的bug 11 | * 优化误操作点击时打开超链接的bug 12 | * 优化滚动条回弹效果 13 | * render方法可强制更新渲染可视范围内已渲染的节点 14 | * 修复scrollTo不带duration参数时无止境回调scroll事件的bug 15 | * 修复scrollTo滚动高度未发生变化不回调scrollEnd事件的bug 16 | * 修复滚动条下边界回弹bug 17 | * 重写tap事件，方便进行事件互斥 18 | 19 | 20 | ### V1.1 21 | 22 | * 动画单位统一至ms 23 | * dragStart、drag、dragEnd事件统一成panStart、pan、panEnd 24 | * 去除sync()方法，采用render()重新渲染即可 25 | * 解耦dom回收更新机制，RequestAnimateFrame替代setTimeout方案 26 | * 去除stickies配置 合并到data 新的数据源格式：受保护字段recycled、template、height可自定义配置（防止数据中有重复字段） 27 | * 数据分组 setDataWithGroup(data,groupId) groupId可为空 则默认从0开始计数 28 | * 新增console插件，方便查看dom数量、行号及dom池数量，调试时直接plug()即可 29 | * 新增maxBufferedNum配置项，用于配制可视范围内的行余量。 30 | 31 | ### v2.0.0 32 | 33 | * 配合kissy gallery社区升级，目前2.0.0不可用，请使用v3.0以上版本！ 34 | 35 | ### V3.0.0 36 | 37 | * 原始数据格式调整，增加数据样式等描述 38 | * 重用dom数固定，通过infiniteElements配置 39 | * 新增DataSet数据集 40 | * renderHook参数调整，无需return 41 | * 支持任意高度元素回收 42 | * 支持position:sticky 43 | * 性能优化 44 | * panstart事件定义为发生移动才出发，区分touchstart 45 | * 支持同步渲染 46 | * 移除autoRender配置，默认不渲染，需要手动render() 47 | 48 | ### V3.0.1 49 | 50 | * 父类XScroll升级1.1.5 51 | 52 | ### V3.0.2 53 | 54 | * 父类XScroll升级1.1.6 55 | 56 | 57 | -------------------------------------------------------------------------------- /3.0.2/build/dataset-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-09-09 11:46:43 AM*/ 2 | KISSY.add("kg/xlist/3.0.2/dataset",function(){var a=function(a){this.data=a&&a.data||[],this.id=a&&a.id||"_ds_"+Date.now()};return a.prototype.appendData=function(a){this.data=this.data.concat(a)},a.prototype.removeData=function(){this.data=[]},a.prototype.getData=function(){return this.data},a.prototype.setId=function(a){return a?(this.id=a,this.id):void 0},a.prototype.getId=function(){return this.id},a}); -------------------------------------------------------------------------------- /3.0.2/build/dataset.js: -------------------------------------------------------------------------------- 1 | /* 2 | combined files : 3 | 4 | kg/xlist/3.0.2/dataset 5 | 6 | */ 7 | ;KISSY.add('kg/xlist/3.0.2/dataset',function(S){ 8 | 9 | var DataSet = function(cfg){ 10 | 11 | this.data = cfg && cfg.data || []; 12 | 13 | this.id = cfg && cfg.id || "_ds_"+Date.now(); 14 | 15 | } 16 | 17 | DataSet.prototype.appendData = function(data){ 18 | this.data = this.data.concat(data) 19 | }; 20 | 21 | DataSet.prototype.removeData = function(){ 22 | this.data = []; 23 | }; 24 | 25 | DataSet.prototype.getData = function(){ 26 | return this.data; 27 | }; 28 | 29 | DataSet.prototype.setId = function(id){ 30 | if(!id) return; 31 | this.id = id; 32 | return this.id; 33 | }; 34 | 35 | DataSet.prototype.getId = function(){ 36 | return this.id; 37 | }; 38 | 39 | 40 | return DataSet; 41 | 42 | }) 43 | -------------------------------------------------------------------------------- /3.0.2/build/mods-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-09-09 11:46:43 AM*/ 2 | KISSY.config("modules",{"kg/xlist/3.0.2/index":{requires:["node","event","kg/xscroll/1.1.6/index","kg/xscroll/1.1.6/util"]}}); -------------------------------------------------------------------------------- /3.0.2/build/mods.js: -------------------------------------------------------------------------------- 1 | KISSY.config('modules', { 2 | 'kg/xlist/3.0.2/index': { requires: ['node', 'event', 'kg/xscroll/1.1.6/index', 'kg/xscroll/1.1.6/util']} 3 | }); -------------------------------------------------------------------------------- /3.0.2/demo/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "itemList": [{ 3 | "data":{ 4 | "num": 0 5 | } 6 | },{ 7 | "data":{ 8 | "num": 0 9 | } 10 | },{ 11 | "data":{ 12 | "num": 0 13 | } 14 | },{ 15 | "data":{ 16 | "num": 0 17 | } 18 | },{ 19 | "data":{ 20 | "num": 0 21 | } 22 | },{ 23 | "data":{ 24 | "num": 0 25 | } 26 | },{ 27 | "data":{ 28 | "num": 0 29 | } 30 | },{ 31 | "data":{ 32 | "num": 0 33 | } 34 | },{ 35 | "data":{ 36 | "num": 0 37 | } 38 | },{ 39 | "data":{ 40 | "num": 0 41 | } 42 | },{ 43 | "data":{ 44 | "num": 0 45 | } 46 | },{ 47 | "data":{ 48 | "num": 0 49 | } 50 | },{ 51 | "data":{ 52 | "num": 0 53 | } 54 | },{ 55 | "data":{ 56 | "num": 0 57 | } 58 | },{ 59 | "data":{ 60 | "num": 0 61 | } 62 | },{ 63 | "data":{ 64 | "num": 0 65 | } 66 | },{ 67 | "data":{ 68 | "num": 0 69 | } 70 | },{ 71 | "data":{ 72 | "num": 0 73 | } 74 | },{ 75 | "data":{ 76 | "num": 0 77 | } 78 | },{ 79 | "data":{ 80 | "num": 0 81 | } 82 | },{ 83 | "data":{ 84 | "num": 0 85 | } 86 | },{ 87 | "data":{ 88 | "num": 0 89 | } 90 | }] 91 | } -------------------------------------------------------------------------------- /3.0.2/demo/demo.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | -ms-touch-action: none; 9 | } 10 | 11 | body,ul,li { 12 | padding: 0; 13 | margin: 0; 14 | border: 0; 15 | } 16 | 17 | body { 18 | font-size: 12px; 19 | font-family: ubuntu, helvetica, arial; 20 | overflow: hidden; 21 | } 22 | 23 | #header { 24 | position: absolute; 25 | z-index: 2; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 45px; 30 | line-height: 45px; 31 | background: #f60; 32 | padding: 0; 33 | color: #eee; 34 | font-size: 20px; 35 | text-align: center; 36 | font-weight: bold; 37 | } 38 | 39 | #footer { 40 | position: absolute; 41 | z-index: 2; 42 | bottom: 0; 43 | left: 0; 44 | width: 100%; 45 | height: 48px; 46 | background: #444; 47 | padding: 0; 48 | border-top: 1px solid #444; 49 | line-height: 48px; 50 | color:#fff; 51 | text-align: center; 52 | } 53 | 54 | #J_List { 55 | position: absolute; 56 | z-index: 1; 57 | top: 45px; 58 | bottom: 48px; 59 | left: 0; 60 | width: 100%; 61 | background: #ccc; 62 | overflow: hidden; 63 | } 64 | 65 | .ks-xlist-container { 66 | position: absolute; 67 | z-index: 1; 68 | -webkit-tap-highlight-color: rgba(0,0,0,0); 69 | width: 100%; 70 | -webkit-transform: translateZ(0); 71 | -moz-transform: translateZ(0); 72 | -ms-transform: translateZ(0); 73 | -o-transform: translateZ(0); 74 | transform: translateZ(0); 75 | -webkit-touch-callout: none; 76 | -webkit-user-select: none; 77 | -moz-user-select: none; 78 | -ms-user-select: none; 79 | user-select: none; 80 | -webkit-text-size-adjust: none; 81 | -moz-text-size-adjust: none; 82 | -ms-text-size-adjust: none; 83 | -o-text-size-adjust: none; 84 | text-size-adjust: none; 85 | } 86 | 87 | .ks-xlist-container li { 88 | width: 100%; 89 | padding: 0 10px; 90 | height: 40px; 91 | line-height: 40px; 92 | border-bottom: 1px solid #ccc; 93 | border-top: 1px solid #fff; 94 | background-color: #fafafa; 95 | } 96 | .ks-xlist-content{ 97 | width: 100%; 98 | } 99 | .ks-xlist-plugin-pulldown-container{ 100 | text-align: center; 101 | width: 100%; 102 | line-height: 50px; 103 | } 104 | .ks-xlist-plugin-pulldown-up .up{ 105 | display: inline; 106 | } 107 | .ks-xlist-plugin-pulldown-up .down{ 108 | display: none; 109 | } 110 | .ks-xlist-plugin-pulldown-down .up{ 111 | display: none; 112 | } 113 | .ks-xlist-plugin-pulldown-down .down{ 114 | display: inline; 115 | } 116 | 117 | .ks-xlist-plugin-pullup-container{ 118 | line-height: 60px; 119 | text-align: center; 120 | } -------------------------------------------------------------------------------- /3.0.2/guide/dataset.md: -------------------------------------------------------------------------------- 1 | ## DataSet 2 | 3 | 代码示例 4 | 5 | ``` 6 | 7 | KISSY.use(kg/xlist/3.0.0/dataset",function(S,DataSet){ 8 | 9 | var ds = new DataSet(); 10 | 11 | ds.setId(124); 12 | 13 | ds.appendData({row:1}) 14 | 15 | ds.appendData([{row:2},{row:3}]) 16 | 17 | ds.removeData(ds.getId()); 18 | 19 | }) 20 | 21 | ``` 22 | ## Constructor 23 | 24 | ``` 25 | var ds = new DataSet({ 26 | id:"DS_1", 27 | data:[ 28 | {...}, 29 | {...} 30 | ] 31 | }) 32 | 33 | ``` 34 | 35 | ## Method 36 | 37 | ### appendData(Array) 38 | 39 | 插入数据 40 | 41 | ### removeData() 42 | 43 | 清空数据 44 | 45 | ### getData() 46 | 47 | 获取数据 48 | 49 | ### setId(id) 50 | 51 | 设置id 52 | 53 | ### getId() 54 | 55 | 获取id 56 | -------------------------------------------------------------------------------- /3.0.2/lib/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview 3 | * @author 4 | **/ 5 | KISSY.add(function (S, Node,Base) { 6 | var EMPTY = ''; 7 | var $ = Node.all; 8 | 9 | return Base.extend({ 10 | initializer:function(){ 11 | 12 | } 13 | },{ 14 | ATTRS:{ 15 | 16 | } 17 | }) 18 | }, {requires:['node', 'base']}); 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /3.0.2/meta/alias.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'kg/xlist/index': {alias: ['kg/xlist/2.0.0/index']} 3 | }); -------------------------------------------------------------------------------- /3.0.2/meta/modules.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'kg/xlist/index': {requires: ['node','base']} 3 | }); -------------------------------------------------------------------------------- /3.0.2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xlist", 3 | "version": "3.0.2", 4 | "private": true, 5 | "devDependencies": { 6 | "grunt-contrib-uglify": "~0.2.0", 7 | "grunt": "~0.4.1", 8 | "grunt-kmc": "~0.1.1", 9 | "grunt-contrib-less": "~0.5.0", 10 | "grunt-contrib-copy": "", 11 | "grunt-contrib-clean": "~0.4.0", 12 | "grunt-contrib-cssmin": "~0.5.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /3.0.2/src/dataset.js: -------------------------------------------------------------------------------- 1 | ;KISSY.add(function(S){ 2 | 3 | var DataSet = function(cfg){ 4 | 5 | this.data = cfg && cfg.data || []; 6 | 7 | this.id = cfg && cfg.id || "_ds_"+Date.now(); 8 | 9 | } 10 | 11 | DataSet.prototype.appendData = function(data){ 12 | this.data = this.data.concat(data) 13 | }; 14 | 15 | DataSet.prototype.removeData = function(){ 16 | this.data = []; 17 | }; 18 | 19 | DataSet.prototype.getData = function(){ 20 | return this.data; 21 | }; 22 | 23 | DataSet.prototype.setId = function(id){ 24 | if(!id) return; 25 | this.id = id; 26 | return this.id; 27 | }; 28 | 29 | DataSet.prototype.getId = function(){ 30 | return this.id; 31 | }; 32 | 33 | 34 | return DataSet; 35 | 36 | }) -------------------------------------------------------------------------------- /3.0.2/test/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "itemList": [{ 3 | "num": 0 4 | }, { 5 | "num": 1 6 | }, { 7 | "num": 2 8 | }, { 9 | "num": 3 10 | }, { 11 | "num": 4 12 | }, { 13 | "num": 5 14 | }, { 15 | "num": 6 16 | }, { 17 | "num": 7 18 | }, { 19 | "num": 8 20 | }, { 21 | "num": 9 22 | },{ 23 | "num": 10 24 | }, { 25 | "num": 11 26 | }, { 27 | "num": 12 28 | }, { 29 | "num": 13 30 | }, { 31 | "num": 14 32 | }, { 33 | "num": 15 34 | }, { 35 | "num": 16 36 | }, { 37 | "num": 17 38 | }, { 39 | "num": 18 40 | }, { 41 | "num": 19 42 | }] 43 | } -------------------------------------------------------------------------------- /3.0.2/test/dataset.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /3.0.2/test/spec/index-spec.js: -------------------------------------------------------------------------------- 1 | KISSY.add(function (S, Node,Demo) { 2 | var $ = Node.all; 3 | describe('xlist', function () { 4 | it('Instantiation of components',function(){ 5 | var demo = new Demo(); 6 | expect(S.isObject(demo)).toBe(true); 7 | }) 8 | }); 9 | 10 | },{requires:['node','gallery/xlist/1.0/']}); -------------------------------------------------------------------------------- /3.0.2/totoro-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "runner":"./test/runner.html" 3 | } -------------------------------------------------------------------------------- /3.0.3/README.md: -------------------------------------------------------------------------------- 1 | ## xlist 2 | 3 | * 版本：3.0.3 4 | * 教程：[http://gallery.kissyui.com/xlist/3.0.3/guide/index.html](http://gallery.kissyui.com/xlist/3.0.3/guide/index.html) 5 | 6 | ## changelog 7 | 8 | ### V1.0 9 | 10 | * 修复下拉刷新长按时触发刷新的bug 11 | * 优化误操作点击时打开超链接的bug 12 | * 优化滚动条回弹效果 13 | * render方法可强制更新渲染可视范围内已渲染的节点 14 | * 修复scrollTo不带duration参数时无止境回调scroll事件的bug 15 | * 修复scrollTo滚动高度未发生变化不回调scrollEnd事件的bug 16 | * 修复滚动条下边界回弹bug 17 | * 重写tap事件，方便进行事件互斥 18 | 19 | 20 | ### V1.1 21 | 22 | * 动画单位统一至ms 23 | * dragStart、drag、dragEnd事件统一成panStart、pan、panEnd 24 | * 去除sync()方法，采用render()重新渲染即可 25 | * 解耦dom回收更新机制，RequestAnimateFrame替代setTimeout方案 26 | * 去除stickies配置 合并到data 新的数据源格式：受保护字段recycled、template、height可自定义配置（防止数据中有重复字段） 27 | * 数据分组 setDataWithGroup(data,groupId) groupId可为空 则默认从0开始计数 28 | * 新增console插件，方便查看dom数量、行号及dom池数量，调试时直接plug()即可 29 | * 新增maxBufferedNum配置项，用于配制可视范围内的行余量。 30 | 31 | ### v2.0.0 32 | 33 | * 配合kissy gallery社区升级，目前2.0.0不可用，请使用v3.0以上版本！ 34 | 35 | ### V3.0.0 36 | 37 | * 原始数据格式调整，增加数据样式等描述 38 | * 重用dom数固定，通过infiniteElements配置 39 | * 新增DataSet数据集 40 | * renderHook参数调整，无需return 41 | * 支持任意高度元素回收 42 | * 支持position:sticky 43 | * 性能优化 44 | * panstart事件定义为发生移动才出发，区分touchstart 45 | * 支持同步渲染 46 | * 移除autoRender配置，默认不渲染，需要手动render() 47 | 48 | ### V3.0.1 49 | 50 | * 父类XScroll升级1.1.5 51 | 52 | ### V3.0.2 53 | 54 | * 父类XScroll升级1.1.6 55 | 56 | ### V3.0.3 57 | 58 | * 修复非回收元素重复render的bug 59 | * 父类XScroll升级1.1.8 60 | * 修复sticky的bug 61 | 62 | -------------------------------------------------------------------------------- /3.0.3/build/dataset-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-09-26 1:30:41 PM*/ 2 | KISSY.add("kg/xlist/3.0.3/dataset",function(){var a=function(a){this.data=a&&a.data||[],this.id=a&&a.id||"_ds_"+Date.now()};return a.prototype.appendData=function(a){this.data=this.data.concat(a)},a.prototype.removeData=function(){this.data=[]},a.prototype.getData=function(){return this.data},a.prototype.setId=function(a){return a?(this.id=a,this.id):void 0},a.prototype.getId=function(){return this.id},a}); -------------------------------------------------------------------------------- /3.0.3/build/dataset.js: -------------------------------------------------------------------------------- 1 | /* 2 | combined files : 3 | 4 | kg/xlist/3.0.3/dataset 5 | 6 | */ 7 | ;KISSY.add('kg/xlist/3.0.3/dataset',function(S){ 8 | 9 | var DataSet = function(cfg){ 10 | 11 | this.data = cfg && cfg.data || []; 12 | 13 | this.id = cfg && cfg.id || "_ds_"+Date.now(); 14 | 15 | } 16 | 17 | DataSet.prototype.appendData = function(data){ 18 | this.data = this.data.concat(data) 19 | }; 20 | 21 | DataSet.prototype.removeData = function(){ 22 | this.data = []; 23 | }; 24 | 25 | DataSet.prototype.getData = function(){ 26 | return this.data; 27 | }; 28 | 29 | DataSet.prototype.setId = function(id){ 30 | if(!id) return; 31 | this.id = id; 32 | return this.id; 33 | }; 34 | 35 | DataSet.prototype.getId = function(){ 36 | return this.id; 37 | }; 38 | 39 | 40 | return DataSet; 41 | 42 | }) 43 | -------------------------------------------------------------------------------- /3.0.3/build/mods-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-09-26 1:30:41 PM*/ 2 | KISSY.config("modules",{"kg/xlist/3.0.3/index":{requires:["node","event","kg/xscroll/1.1.8/index","kg/xscroll/1.1.8/util"]}}); -------------------------------------------------------------------------------- /3.0.3/build/mods.js: -------------------------------------------------------------------------------- 1 | KISSY.config('modules', { 2 | 'kg/xlist/3.0.3/index': { requires: ['node', 'event', 'kg/xscroll/1.1.8/index', 'kg/xscroll/1.1.8/util']} 3 | }); -------------------------------------------------------------------------------- /3.0.3/demo/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "itemList": [{ 3 | "data":{ 4 | "num": 0 5 | } 6 | },{ 7 | "data":{ 8 | "num": 0 9 | } 10 | },{ 11 | "data":{ 12 | "num": 0 13 | } 14 | },{ 15 | "data":{ 16 | "num": 0 17 | } 18 | },{ 19 | "data":{ 20 | "num": 0 21 | } 22 | },{ 23 | "data":{ 24 | "num": 0 25 | } 26 | },{ 27 | "data":{ 28 | "num": 0 29 | } 30 | },{ 31 | "data":{ 32 | "num": 0 33 | } 34 | },{ 35 | "data":{ 36 | "num": 0 37 | } 38 | },{ 39 | "data":{ 40 | "num": 0 41 | } 42 | },{ 43 | "data":{ 44 | "num": 0 45 | } 46 | },{ 47 | "data":{ 48 | "num": 0 49 | } 50 | },{ 51 | "data":{ 52 | "num": 0 53 | } 54 | },{ 55 | "data":{ 56 | "num": 0 57 | } 58 | },{ 59 | "data":{ 60 | "num": 0 61 | } 62 | },{ 63 | "data":{ 64 | "num": 0 65 | } 66 | },{ 67 | "data":{ 68 | "num": 0 69 | } 70 | },{ 71 | "data":{ 72 | "num": 0 73 | } 74 | },{ 75 | "data":{ 76 | "num": 0 77 | } 78 | },{ 79 | "data":{ 80 | "num": 0 81 | } 82 | },{ 83 | "data":{ 84 | "num": 0 85 | } 86 | },{ 87 | "data":{ 88 | "num": 0 89 | } 90 | }] 91 | } -------------------------------------------------------------------------------- /3.0.3/demo/demo.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | -ms-touch-action: none; 9 | } 10 | 11 | body,ul,li { 12 | padding: 0; 13 | margin: 0; 14 | border: 0; 15 | } 16 | 17 | body { 18 | font-size: 12px; 19 | font-family: ubuntu, helvetica, arial; 20 | overflow: hidden; 21 | } 22 | 23 | #header { 24 | position: absolute; 25 | z-index: 2; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 45px; 30 | line-height: 45px; 31 | background: #f60; 32 | padding: 0; 33 | color: #eee; 34 | font-size: 20px; 35 | text-align: center; 36 | font-weight: bold; 37 | } 38 | 39 | #footer { 40 | position: absolute; 41 | z-index: 2; 42 | bottom: 0; 43 | left: 0; 44 | width: 100%; 45 | height: 48px; 46 | background: #444; 47 | padding: 0; 48 | border-top: 1px solid #444; 49 | line-height: 48px; 50 | color:#fff; 51 | text-align: center; 52 | } 53 | 54 | #J_List { 55 | position: absolute; 56 | z-index: 1; 57 | top: 45px; 58 | bottom: 48px; 59 | left: 0; 60 | width: 100%; 61 | background: #ccc; 62 | overflow: hidden; 63 | } 64 | 65 | .ks-xlist-container { 66 | position: absolute; 67 | z-index: 1; 68 | -webkit-tap-highlight-color: rgba(0,0,0,0); 69 | width: 100%; 70 | -webkit-transform: translateZ(0); 71 | -moz-transform: translateZ(0); 72 | -ms-transform: translateZ(0); 73 | -o-transform: translateZ(0); 74 | transform: translateZ(0); 75 | -webkit-touch-callout: none; 76 | -webkit-user-select: none; 77 | -moz-user-select: none; 78 | -ms-user-select: none; 79 | user-select: none; 80 | -webkit-text-size-adjust: none; 81 | -moz-text-size-adjust: none; 82 | -ms-text-size-adjust: none; 83 | -o-text-size-adjust: none; 84 | text-size-adjust: none; 85 | } 86 | 87 | .ks-xlist-container li { 88 | width: 100%; 89 | padding: 0 10px; 90 | height: 40px; 91 | line-height: 40px; 92 | border-bottom: 1px solid #ccc; 93 | border-top: 1px solid #fff; 94 | background-color: #fafafa; 95 | } 96 | .ks-xlist-content{ 97 | width: 100%; 98 | } 99 | .ks-xlist-plugin-pulldown-container{ 100 | text-align: center; 101 | width: 100%; 102 | line-height: 50px; 103 | } 104 | .ks-xlist-plugin-pulldown-up .up{ 105 | display: inline; 106 | } 107 | .ks-xlist-plugin-pulldown-up .down{ 108 | display: none; 109 | } 110 | .ks-xlist-plugin-pulldown-down .up{ 111 | display: none; 112 | } 113 | .ks-xlist-plugin-pulldown-down .down{ 114 | display: inline; 115 | } 116 | 117 | .ks-xlist-plugin-pullup-container{ 118 | line-height: 60px; 119 | text-align: center; 120 | } -------------------------------------------------------------------------------- /3.0.3/demo/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /3.0.3/guide/dataset.md: -------------------------------------------------------------------------------- 1 | ## DataSet 2 | 3 | 代码示例 4 | 5 | ``` 6 | 7 | KISSY.use(kg/xlist/3.0.3/dataset",function(S,DataSet){ 8 | 9 | var ds = new DataSet(); 10 | 11 | ds.setId(124); 12 | 13 | ds.appendData({row:1}) 14 | 15 | ds.appendData([{row:2},{row:3}]) 16 | 17 | ds.removeData(ds.getId()); 18 | 19 | }) 20 | 21 | ``` 22 | ## Constructor 23 | 24 | ``` 25 | var ds = new DataSet({ 26 | id:"DS_1", 27 | data:[ 28 | {...}, 29 | {...} 30 | ] 31 | }) 32 | 33 | ``` 34 | 35 | ## Method 36 | 37 | ### appendData(Array) 38 | 39 | 插入数据 40 | 41 | ### removeData() 42 | 43 | 清空数据 44 | 45 | ### getData() 46 | 47 | 获取数据 48 | 49 | ### setId(id) 50 | 51 | 设置id 52 | 53 | ### getId() 54 | 55 | 获取id 56 | -------------------------------------------------------------------------------- /3.0.3/lib/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview 3 | * @author 4 | **/ 5 | KISSY.add(function (S, Node,Base) { 6 | var EMPTY = ''; 7 | var $ = Node.all; 8 | 9 | return Base.extend({ 10 | initializer:function(){ 11 | 12 | } 13 | },{ 14 | ATTRS:{ 15 | 16 | } 17 | }) 18 | }, {requires:['node', 'base']}); 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /3.0.3/meta/alias.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'kg/xlist/index': {alias: ['kg/xlist/2.0.0/index']} 3 | }); -------------------------------------------------------------------------------- /3.0.3/meta/modules.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'kg/xlist/index': {requires: ['node','base']} 3 | }); -------------------------------------------------------------------------------- /3.0.3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xlist", 3 | "version": "3.0.3", 4 | "private": true, 5 | "devDependencies": { 6 | "grunt-contrib-uglify": "~0.2.0", 7 | "grunt": "~0.4.1", 8 | "grunt-kmc": "~0.1.1", 9 | "grunt-contrib-less": "~0.5.0", 10 | "grunt-contrib-copy": "", 11 | "grunt-contrib-clean": "~0.4.0", 12 | "grunt-contrib-cssmin": "~0.5.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /3.0.3/src/dataset.js: -------------------------------------------------------------------------------- 1 | ;KISSY.add(function(S){ 2 | 3 | var DataSet = function(cfg){ 4 | 5 | this.data = cfg && cfg.data || []; 6 | 7 | this.id = cfg && cfg.id || "_ds_"+Date.now(); 8 | 9 | } 10 | 11 | DataSet.prototype.appendData = function(data){ 12 | this.data = this.data.concat(data) 13 | }; 14 | 15 | DataSet.prototype.removeData = function(){ 16 | this.data = []; 17 | }; 18 | 19 | DataSet.prototype.getData = function(){ 20 | return this.data; 21 | }; 22 | 23 | DataSet.prototype.setId = function(id){ 24 | if(!id) return; 25 | this.id = id; 26 | return this.id; 27 | }; 28 | 29 | DataSet.prototype.getId = function(){ 30 | return this.id; 31 | }; 32 | 33 | 34 | return DataSet; 35 | 36 | }) -------------------------------------------------------------------------------- /3.0.3/test/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "itemList": [{ 3 | "data":{ 4 | "num": 0 5 | } 6 | },{ 7 | "data":{ 8 | "num": 0 9 | } 10 | },{ 11 | "data":{ 12 | "num": 0 13 | } 14 | },{ 15 | "data":{ 16 | "num": 0 17 | } 18 | },{ 19 | "data":{ 20 | "num": 0 21 | } 22 | },{ 23 | "data":{ 24 | "num": 0 25 | } 26 | },{ 27 | "data":{ 28 | "num": 0 29 | } 30 | },{ 31 | "data":{ 32 | "num": 0 33 | } 34 | },{ 35 | "data":{ 36 | "num": 0 37 | } 38 | },{ 39 | "data":{ 40 | "num": 0 41 | } 42 | },{ 43 | "data":{ 44 | "num": 0 45 | } 46 | },{ 47 | "data":{ 48 | "num": 0 49 | } 50 | },{ 51 | "data":{ 52 | "num": 0 53 | } 54 | },{ 55 | "data":{ 56 | "num": 0 57 | } 58 | },{ 59 | "data":{ 60 | "num": 0 61 | } 62 | },{ 63 | "data":{ 64 | "num": 0 65 | } 66 | },{ 67 | "data":{ 68 | "num": 0 69 | } 70 | },{ 71 | "data":{ 72 | "num": 0 73 | } 74 | },{ 75 | "data":{ 76 | "num": 0 77 | } 78 | },{ 79 | "data":{ 80 | "num": 0 81 | } 82 | },{ 83 | "data":{ 84 | "num": 0 85 | } 86 | },{ 87 | "data":{ 88 | "num": 0 89 | } 90 | }] 91 | } -------------------------------------------------------------------------------- /3.0.3/test/dataset.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /3.0.3/test/spec/index-spec.js: -------------------------------------------------------------------------------- 1 | KISSY.add(function (S, Node,Demo) { 2 | var $ = Node.all; 3 | describe('xlist', function () { 4 | it('Instantiation of components',function(){ 5 | var demo = new Demo(); 6 | expect(S.isObject(demo)).toBe(true); 7 | }) 8 | }); 9 | 10 | },{requires:['node','gallery/xlist/1.0/']}); -------------------------------------------------------------------------------- /3.0.3/totoro-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "runner":"./test/runner.html" 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## xlist 2 | 3 | * 版本：3.0.0 4 | * 教程：[http://gallery.kissyui.com/xlist/3.0.0/guide/index.html](http://gallery.kissyui.com/xlist/3.0.0/guide/index.html) 5 | 6 | ## changelog 7 | 8 | ### V1.0 9 | 10 | * 修复下拉刷新长按时触发刷新的bug 11 | * 优化误操作点击时打开超链接的bug 12 | * 优化滚动条回弹效果 13 | * render方法可强制更新渲染可视范围内已渲染的节点 14 | * 修复scrollTo不带duration参数时无止境回调scroll事件的bug 15 | * 修复scrollTo滚动高度未发生变化不回调scrollEnd事件的bug 16 | * 修复滚动条下边界回弹bug 17 | * 重写tap事件，方便进行事件互斥 18 | 19 | 20 | ### V1.1 21 | 22 | * 动画单位统一至ms 23 | * dragStart、drag、dragEnd事件统一成panStart、pan、panEnd 24 | * 去除sync()方法，采用render()重新渲染即可 25 | * 解耦dom回收更新机制，RequestAnimateFrame替代setTimeout方案 26 | * 去除stickies配置 合并到data 新的数据源格式：受保护字段recycled、template、height可自定义配置（防止数据中有重复字段） 27 | * 数据分组 setDataWithGroup(data,groupId) groupId可为空 则默认从0开始计数 28 | * 新增console插件，方便查看dom数量、行号及dom池数量，调试时直接plug()即可 29 | * 新增maxBufferedNum配置项，用于配制可视范围内的行余量。 30 | 31 | ### v2.0.0 32 | 33 | * 配合kissy gallery社区升级，目前2.0.0不可用，请使用v3.0以上版本！ 34 | 35 | ### V3.0.0 36 | 37 | * 原始数据格式调整，增加数据样式等描述 38 | * 重用dom数固定，通过infiniteElements配置 39 | * 新增DataSet数据集 40 | * renderHook参数调整，无需return 41 | * 支持任意高度元素回收 42 | * 支持position:sticky 43 | * 性能优化 44 | * panstart事件定义为发生移动才出发，区分touchstart 45 | * 支持同步渲染 46 | * 移除autoRender配置，默认不渲染，需要手动render() 47 | 48 | -------------------------------------------------------------------------------- /abc.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xlist", 3 | "comName":"Xlist", 4 | "version": "1.0", 5 | "desc": "无尽列表组件", 6 | "tag":"kissy-mini,kissy-mini", 7 | "githubName":"huxiaoqi567", 8 | "author": { 9 | "name": "伯才", 10 | "email": "382850581@qq.com", 11 | "page": "github.com/huxiaoqi567/" 12 | }, 13 | "flexComboPort":"80", 14 | "reserveServerPort":"9000", 15 | "type": "kissy-gallery", 16 | "type-url": "http://gallery.kissyui.com/guide" 17 | } 18 | -------------------------------------------------------------------------------- /doc/README.md: -------------------------------------------------------------------------------- 1 | ## xlist 2 | 3 | * 版本：3.0.3 4 | * 教程：[http://gallery.kissyui.com/xlist/3.0.3/guide/index.html](http://gallery.kissyui.com/xlist/3.0.3/guide/index.html) 5 | 6 | ## changelog 7 | 8 | ### V1.0 9 | 10 | * 修复下拉刷新长按时触发刷新的bug 11 | * 优化误操作点击时打开超链接的bug 12 | * 优化滚动条回弹效果 13 | * render方法可强制更新渲染可视范围内已渲染的节点 14 | * 修复scrollTo不带duration参数时无止境回调scroll事件的bug 15 | * 修复scrollTo滚动高度未发生变化不回调scrollEnd事件的bug 16 | * 修复滚动条下边界回弹bug 17 | * 重写tap事件，方便进行事件互斥 18 | 19 | 20 | ### V1.1 21 | 22 | * 动画单位统一至ms 23 | * dragStart、drag、dragEnd事件统一成panStart、pan、panEnd 24 | * 去除sync()方法，采用render()重新渲染即可 25 | * 解耦dom回收更新机制，RequestAnimateFrame替代setTimeout方案 26 | * 去除stickies配置 合并到data 新的数据源格式：受保护字段recycled、template、height可自定义配置（防止数据中有重复字段） 27 | * 数据分组 setDataWithGroup(data,groupId) groupId可为空 则默认从0开始计数 28 | * 新增console插件，方便查看dom数量、行号及dom池数量，调试时直接plug()即可 29 | * 新增maxBufferedNum配置项，用于配制可视范围内的行余量。 30 | 31 | ### v2.0.0 32 | 33 | * 配合kissy gallery社区升级，目前2.0.0不可用，请使用v3.0以上版本！ 34 | 35 | ### V3.0.0 36 | 37 | * 原始数据格式调整，增加数据样式等描述 38 | * 重用dom数固定，通过infiniteElements配置 39 | * 新增DataSet数据集 40 | * renderHook参数调整，无需return 41 | * 支持任意高度元素回收 42 | * 支持position:sticky 43 | * 性能优化 44 | * panstart事件定义为发生移动才出发，区分touchstart 45 | * 支持同步渲染 46 | * 移除autoRender配置，默认不渲染，需要手动render() 47 | 48 | ### V3.0.1 49 | 50 | * 父类XScroll升级1.1.5 51 | 52 | ### V3.0.2 53 | 54 | * 父类XScroll升级1.1.6 55 | 56 | ### V3.0.3 57 | 58 | * 修复非回收元素重复render的bug 59 | * 父类XScroll升级1.1.8 60 | * 修复sticky的bug 61 | 62 | -------------------------------------------------------------------------------- /doc/build/dataset-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-09-26 1:30:41 PM*/ 2 | KISSY.add("kg/xlist/3.0.3/dataset",function(){var a=function(a){this.data=a&&a.data||[],this.id=a&&a.id||"_ds_"+Date.now()};return a.prototype.appendData=function(a){this.data=this.data.concat(a)},a.prototype.removeData=function(){this.data=[]},a.prototype.getData=function(){return this.data},a.prototype.setId=function(a){return a?(this.id=a,this.id):void 0},a.prototype.getId=function(){return this.id},a}); -------------------------------------------------------------------------------- /doc/build/dataset.js: -------------------------------------------------------------------------------- 1 | /* 2 | combined files : 3 | 4 | kg/xlist/3.0.3/dataset 5 | 6 | */ 7 | ;KISSY.add('kg/xlist/3.0.3/dataset',function(S){ 8 | 9 | var DataSet = function(cfg){ 10 | 11 | this.data = cfg && cfg.data || []; 12 | 13 | this.id = cfg && cfg.id || "_ds_"+Date.now(); 14 | 15 | } 16 | 17 | DataSet.prototype.appendData = function(data){ 18 | this.data = this.data.concat(data) 19 | }; 20 | 21 | DataSet.prototype.removeData = function(){ 22 | this.data = []; 23 | }; 24 | 25 | DataSet.prototype.getData = function(){ 26 | return this.data; 27 | }; 28 | 29 | DataSet.prototype.setId = function(id){ 30 | if(!id) return; 31 | this.id = id; 32 | return this.id; 33 | }; 34 | 35 | DataSet.prototype.getId = function(){ 36 | return this.id; 37 | }; 38 | 39 | 40 | return DataSet; 41 | 42 | }) 43 | -------------------------------------------------------------------------------- /doc/build/drag-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("kg/xlist/2.0.0/drag",function(a){function b(a){return a.changedTouches.length>1?void(l=!0):(o=[],n={},n.startX=a.touches[0].clientX,n.startY=a.touches[0].clientY,n.deltaX=0,n.deltaY=0,a.touch=n,o.push({deltaX:n.deltaX,deltaY:n.deltaY,timeStamp:a.timeStamp}),a.deltaX=n.deltaX,a.deltaY=n.deltaY,void m(a.target).fire(g,a))}function c(a){a.changedTouches.length>1||(o.length?(n.deltaX=a.touches[0].clientX-n.startX,n.deltaY=a.touches[0].clientY-n.startY,a.touch=n,o.push({deltaX:n.deltaX,deltaY:n.deltaY,timeStamp:a.timeStamp}),a.deltaX=n.deltaX,a.deltaY=n.deltaY,a.velocityX=0,a.velocityY=0,a.isPropagationStopped()||m(a.target).fire(i,a)):(n={},n.startX=a.touches[0].clientX,n.startY=a.touches[0].clientY,n.deltaX=0,n.deltaY=0,a.touch=n,o.push({deltaX:n.deltaX,deltaY:n.deltaY,timeStamp:a.timeStamp}),a.deltaX=n.deltaX,a.deltaY=n.deltaY,m(a.target).fire(g,a)))}function d(a){var b=0,c=0,d=0;if(!(a.changedTouches.length>1)){n.deltaX=a.changedTouches[0].clientX-n.startX,n.deltaY=a.changedTouches[0].clientY-n.startY,a.deltaX=n.deltaX,a.deltaY=n.deltaY,a.touch=n,a.touch.record=o;var g=(a.touch.startX,a.touch.startY,o.length),i=o[0]&&o[0].timeStamp;if(!(2>g)&&i){{o[g-1].timeStamp-o[0].timeStamp}for(var j in o)j>0?(o[j].velocity=e(o[j].deltaX,o[j].deltaY,o[j-1].deltaX,o[j-1].deltaY)/(o[j].timeStamp-o[j-1].timeStamp),o[j].velocityX=(o[j].deltaX-o[j-1].deltaX)/(o[j].timeStamp-o[j-1].timeStamp),o[j].velocityY=(o[j].deltaY-o[j-1].deltaY)/(o[j].timeStamp-o[j-1].timeStamp)):(o[j].velocity=0,o[j].velocityX=0,o[j].velocityY=0);var l=o[0].velocityX/Math.abs(o[0].velocityX);for(var j in o)o[j].velocityX/Math.abs(o[j].velocityX)!=l&&(l=o[j].velocityX/Math.abs(o[j].velocityX),d=j);var p=o[0].velocityY/Math.abs(o[0].velocityY);for(var j in o)o[j].velocityY/Math.abs(o[j].velocityY)!=p&&(p=o[j].velocityY/Math.abs(o[j].velocityY),c=j);b=Math.max(d,c);{o[b]}a.touch.record=a.touch.record.splice(b-1);var q=f(a.touch.record);a.velocityX=Math.abs(q.velocityX)>k?q.velocityX/Math.abs(q.velocityX)*k:q.velocityX,a.velocityY=Math.abs(q.velocityY)>k?q.velocityY/Math.abs(q.velocityY)*k:q.velocityY,a.velocity=Math.sqrt(Math.pow(a.velocityX,2)+Math.pow(a.velocityY,2)),m(a.target).fire(h,a),n={},o=[]}}}function e(a,b,c,d){return Math.sqrt(Math.pow(c-a,2)+Math.pow(d-b,2))}function f(a){for(var b=0,c=0,d=a.length,e=0;d>e;e++)b+=a[e].velocityY,c+=a[e].velocityX;return b/=d,c/=d,{velocityY:Math.abs(a[d-1].velocityY)>j?b:0,velocityX:Math.abs(a[d-1].velocityX)>j?c:0}}var g=(window.document,"gestureDragStart"),h="gestureDragEnd",i="gestureDrag",j=.35,k=8,l=!1,m=a.all,n={},o=[];return a.each([i],function(e){a.Event.Special[e]={setup:function(){m(this).on("touchstart",b),m(this).on("touchmove",c),m(this).on("touchend",d)},teardown:function(){m(this).detach("touchstart",b),m(this).detach("touchmove",c),m(this).detach("touchend",d)}}}),{DRAG_START:g,DRAG:i,DRAG_END:h}},{requires:["node","event"]}); -------------------------------------------------------------------------------- /doc/build/mods-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-09-26 1:30:41 PM*/ 2 | KISSY.config("modules",{"kg/xlist/3.0.3/index":{requires:["node","event","kg/xscroll/1.1.8/index","kg/xscroll/1.1.8/util"]}}); -------------------------------------------------------------------------------- /doc/build/mods.js: -------------------------------------------------------------------------------- 1 | KISSY.config('modules', { 2 | 'kg/xlist/3.0.3/index': { requires: ['node', 'event', 'kg/xscroll/1.1.8/index', 'kg/xscroll/1.1.8/util']} 3 | }); -------------------------------------------------------------------------------- /doc/build/plugin/console-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-08-29 5:12:06 PM*/ 2 | KISSY.add("kg/xlist/3.0.0/plugin/console",function(a,b,c){var d=a.all,e=c.extend({pluginId:"xlist/plugin/console",pluginInitializer:function(a){var b,c,e=this,f=e.userConfig,a=f.xlist,g=d("
                ").css({position:"absolute",top:0,width:"100%",background:"#000",opacity:.5,right:0,color:"#fff","text-align":"center","font-size":"28px","line-height":"50px","z-index":9999}).prependTo(a.$renderTo),h=(Object.keys(a.__renderDomRecord).length,Object.keys(a.visibleIndex).toString()),i=0;a.on("itemPop",function(){var a=Date.now();itemFps=1e3/(a-c),c=a});var j;a.on("panEnd",function(a){j=Math.abs(a.velocityY.toFixed(1))}),a.on("scroll",function(){var c=j>a.userConfig.maxSpeed?a.userConfig.maxSpeed:j,d=Date.now();i=1e3/(d-b),b=d;var e=Object.keys(a.visibleIndex).toString();if(e!=h){var f=Object.keys(a.__renderDomRecord).length;g.html("Dom Num :"+f+"
                fps:"+i.toFixed(1)+"
                PoolFps:"+itemFps.toFixed(1)+"
                Height:"+a.userConfig.itemHeight+"px
                PoolNum:"+a.itemPool.items.length+"
                Velocity:"+c+"px/ms
                1000/Height*Velocity="+(1e3/a.userConfig.itemHeight*c).toFixed(1)),h=e}})}});return e},{requires:["node","base"]}); -------------------------------------------------------------------------------- /doc/build/plugin/console.js: -------------------------------------------------------------------------------- 1 | /* 2 | combined files : 3 | 4 | kg/xlist/3.0.0/plugin/console 5 | 6 | */ 7 | KISSY.add('kg/xlist/3.0.0/plugin/console',function(S,Node,Base){ 8 | var $ = S.all; 9 | var Console = Base.extend({ 10 | pluginId:"xlist/plugin/console", 11 | pluginInitializer:function(xlist){ 12 | var self = this; 13 | var userConfig = self.userConfig; 14 | var xlist = userConfig.xlist; 15 | var $console = $("
                ").css({ 16 | "position": "absolute", 17 | "top":0, 18 | "width": "100%", 19 | // "height": "100%", 20 | "background": "#000", 21 | "opacity":0.5, 22 | "right":0, 23 | "color":"#fff", 24 | "text-align": "center", 25 | "font-size":"28px", 26 | "line-height":"50px", 27 | "z-index": 9999 28 | }).prependTo(xlist.$renderTo); 29 | var cache = Object.keys(xlist.__renderDomRecord).length; 30 | var visibleIndex = Object.keys(xlist.visibleIndex).toString(); 31 | 32 | 33 | 34 | var prev,fps = 0; 35 | var _prev; 36 | xlist.on("itemPop",function(){ 37 | var now = Date.now(); 38 | itemFps = 1000/(now - _prev); 39 | _prev = now; 40 | }) 41 | var velocity; 42 | xlist.on("panEnd",function(e){ 43 | velocity = Math.abs(e.velocityY.toFixed(1)); 44 | }) 45 | 46 | xlist.on("scroll",function(e){ 47 | var v = velocity > xlist.userConfig.maxSpeed ? xlist.userConfig.maxSpeed : velocity; 48 | var now = Date.now(); 49 | 50 | fps = 1000/(now - prev); 51 | prev = now; 52 | var _visibleIndex = Object.keys(xlist.visibleIndex).toString(); 53 | if(_visibleIndex != visibleIndex){ 54 | var num = Object.keys(xlist.__renderDomRecord).length; 55 | $console.html("Dom Num :"+ num+"
                fps:"+ fps.toFixed(1)+"
                PoolFps:"+itemFps.toFixed(1)+"
                Height:"+xlist.userConfig.itemHeight+"px
                PoolNum:"+xlist.itemPool.items.length+"
                Velocity:"+v+"px/ms
                1000/Height*Velocity="+(1000/xlist.userConfig.itemHeight*v).toFixed(1)); 56 | visibleIndex = _visibleIndex; 57 | } 58 | }) 59 | } 60 | }); 61 | 62 | return Console; 63 | 64 | },{ 65 | requires:['node','base'] 66 | }); 67 | -------------------------------------------------------------------------------- /doc/build/plugin/mods-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-08-29 5:12:06 PM*/ 2 | -------------------------------------------------------------------------------- /doc/build/plugin/mods.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackyang-hk/xlist/c026046eb46554db2c5ece290ea15b1749db6707/doc/build/plugin/mods.js -------------------------------------------------------------------------------- /doc/build/plugin/pulldown-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("gallery/xlist/1.0/plugin/pulldown",function(a,b){var c,d=a.all,e="Pull Down To Refresh",f="Loading...",g=b.extend({initializer:function(){var b=this,d=b.userConfig.xlist;b.userConfig=a.merge({content:e,downContent:"",upContent:"",loadingContent:f,prefix:"ks-xlist-plugin-pulldown-"},b.userConfig),c=b.userConfig.prefix,d&&d.on("afterRender",function(){b.render()})},render:function(){var a=this,b=c+"container",e='
                ',f=a.userConfig.xlist,g=a.userConfig.height||60,h=a.$pulldown=d(e).css({position:"absolute",width:"100%",height:g,top:-g}).prependTo(f.$ctn);a.on("afterStatusChange",function(b){h.removeClass(c+b.prevVal).addClass(c+b.newVal),a.setContent(a.userConfig[b.newVal+"Content"])}),h.addClass(c+a.get("status")),h.html(a.userConfig[a.get("status")+"Content"]||a.userConfig.content),a._bindEvt()},_bindEvt:function(){var a=this;if(!a._evtBinded){var b,c,d=a.userConfig.height||60,e=0;xlist.on("drag",function(){e=xlist.getOffsetTop(),e>0&&(Math.abs(e)d&&!a.isBoundryBounce&&"tapHold"!=f.originType&&(xlist.disableBoundryCheck(),xlist.scrollTo(-d,.4),xlist.isScrolling=!1,a.set("status","loading"),c=setTimeout(function(){xlist.enableBoundryCheck()},500),b=setTimeout(function(){location.reload()},700))}),a._evtBinded=!0}},setContent:function(a){var b=this;a&&b.$pulldown.html(a)}},{ATTRS:{status:{value:"down"}}});return g},{requires:["base","node"]}); -------------------------------------------------------------------------------- /doc/build/plugin/pullup-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("gallery/xlist/1.0/plugin/pullup",function(a,b){var c,d=a.all,e="Pull Down To Refresh",f="Loading...",g=b.extend({initializer:function(){var b=this,d=b.userConfig.xlist;b.userConfig=a.merge({content:e,downContent:"",upContent:"",pullUpHeight:40,loadingContent:f,boundry:{},prefix:"ks-xlist-plugin-pullup-"},b.userConfig);b.userConfig.height||60;c=b.userConfig.prefix,d.on("afterRender",function(){b.render(),b._bindEvt()})},render:function(){{var a=this,b=c+"container",e=a.userConfig.xlist,f=a.userConfig.height||60;a.$pullup=d("
                ").addClass(b).css({position:"absolute",bottom:-f,width:"100%"}).prependTo(e.$ctn)}a.fire("afterRender")},_bindEvt:function(){var a=this;if(!a._evtBinded){var b=a.userConfig.xlist,d=a.$pullup,e=0;a.on("afterStatusChange",function(b){d.removeClass(c+b.prevVal).addClass(c+b.newVal),a.setContent(a.userConfig[b.newVal+"Content"])}),d.addClass(c+a.get("status")),d.html(a.userConfig[a.get("status")+"Content"]||a.userConfig.content),b.on("drag",function(){e=b.getOffsetTop(),e 4 | * @plugin pullup XLIST上拉加载插件 5 | **/ 6 | ;KISSY.add("gallery/xlist/1.0/plugin/pullup",function(S, Base, Node) { 7 | var $ = S.all; 8 | var prefix; 9 | var containerCls; 10 | var content = "Pull Down To Refresh"; 11 | var loadingContent = "Loading..."; 12 | 13 | var PullUp = Base.extend({ 14 | initializer: function() { 15 | var self = this; 16 | var xlist = self.userConfig.xlist; 17 | self.userConfig = S.merge({ 18 | content: content, 19 | downContent: "", 20 | upContent: "", 21 | pullUpHeight:40, 22 | loadingContent: loadingContent, 23 | boundry:{}, 24 | prefix: "ks-xlist-plugin-pullup-" 25 | }, self.userConfig); 26 | var height = self.userConfig.height || 60; 27 | prefix = self.userConfig.prefix; 28 | // xlist.userConfig.boundry.bottom = height; 29 | xlist.on("afterRender",function(){ 30 | self.render() 31 | self._bindEvt(); 32 | }) 33 | 34 | 35 | 36 | }, 37 | render: function() { 38 | var self = this; 39 | var containerCls = prefix + "container"; 40 | var tpl = '
                '; 41 | var xlist = self.userConfig.xlist; 42 | var height = self.userConfig.height || 60; 43 | var $pullup = self.$pullup = $("
                ").addClass(containerCls).css({ 44 | "position":"absolute", 45 | "bottom":-height, 46 | "width":"100%" 47 | }).prependTo(xlist.$ctn); 48 | self.fire("afterRender"); 49 | }, 50 | _bindEvt:function(){ 51 | var self =this; 52 | if(self._evtBinded) return; 53 | var xlist= self.userConfig.xlist; 54 | var $pullup = self.$pullup; 55 | var offsetTop = 0; 56 | 57 | self.on("afterStatusChange", function(e) { 58 | $pullup.removeClass(prefix + e.prevVal).addClass(prefix + e.newVal); 59 | self.setContent(self.userConfig[e.newVal + "Content"]); 60 | }) 61 | 62 | $pullup.addClass(prefix + self.get("status")); 63 | $pullup.html(self.userConfig[self.get("status") + "Content"] || self.userConfig["content"]); 64 | 65 | xlist.on("drag", function(e) { 66 | offsetTop = xlist.getOffsetTop(); 67 | if (offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight) { 68 | //松开加载更多 69 | self.set("status","down") 70 | }else{ 71 | self.set("status","up") 72 | } 73 | }) 74 | 75 | xlist.on("scrollEnd",function(e){ 76 | offsetTop = e.offsetTop 77 | if(offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight){ 78 | self.set("status","loading"); 79 | self.fire("loading",function(){ 80 | 81 | }) 82 | } 83 | }) 84 | 85 | xlist.on("dataChange", function() { 86 | self.set("status","up") 87 | }) 88 | 89 | self._evtBinded = true; 90 | 91 | }, 92 | setContent: function(content) { 93 | var self = this; 94 | if (content){ 95 | self.$pullup.html(content); 96 | } 97 | } 98 | }, { 99 | ATTRS: { 100 | "status": { 101 | value: "up" 102 | } 103 | 104 | } 105 | }) 106 | 107 | return PullUp; 108 | 109 | 110 | }, { 111 | requires: ['base', 'node'] 112 | }); -------------------------------------------------------------------------------- /doc/build/plugin/scrollbar-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("gallery/xlist/1.0/plugin/scrollbar",function(a,b,c){var d=a.all,e=60,f=5,g=c.extend({initializer:function(){var b=this;b.userConfig=a.merge({},b.userConfig),b.xlist=b.userConfig.xlist,b.xlist.on("sync",function(){b.set("containerHeight",b.xlist.containerHeight),b.set("indicateHeight",b.xlist.height),b.set("offsetTop",b.xlist.getOffsetTop()),b.render(),b._bindEvt()})},render:function(){var a=this;if(!a.__isRender){a.__isRender=!0;var b=a.xlist,c="
                ";a.$scrollbar=d(c).css({width:"3px",position:"absolute",bottom:"2px",top:"2px",right:"2px",zIndex:999,overflow:"hidden","-webkit-border-radius":"2px"}).prependTo(b.$renderTo);var e="
                ";a.$indicate=d(e).css({"-webkit-box-sizing":"border-box",position:"absolute",background:"rgba(0,0,0,0.3)","-webkit-border-radius":"1.5px"}).prependTo(a.$scrollbar).css({width:"100%"}),a._update()}},_update:function(){var a=this,b=a.computeScrollBar(Math.abs(a.get("offsetTop")));a._moveTo(b.top),a.$indicate.height(b.height)},computeScrollBar:function(a){var b=this,a=a||0,c=b.get("indicateHeight"),d=b.get("containerHeight"),g=a/d,h=c*g,i=c*c/d,j=h*(c-e+i)/c;if(e>i&&(i=e,h=j),0>h)h=Math.abs(a)*i/e>i-f?f-i:a*i/e;else if(h+i>c){var k=a-d+c;h=k*i/e>i-f?c-f:c-i+k*i/e}return b.set("barOffsetTop",h),{height:i,top:h}},_scrollTo:function(a,b,c){var d=this;d.show(),d.$indicate[0].style.webkitTransform="translateY("+a+"px)",d.$indicate[0].style.webkitTransition=[b,"s ",c," 0"].join("")},_moveTo:function(a){var b=this;b.show(),b.$indicate[0].style.webkitTransform="translateY("+a+"px)",b.$indicate[0].style.webkitTransition=""},_bindEvt:function(){var a=this;a.__isEvtBind||(a.__isEvtBind=!0,a.xlist.on("drag",function(){a._moveTo(a.computeScrollBar(-a.xlist.getOffsetTop()).top)}),a.xlist.on("scrollTo",function(b){a._scrollTo(a.computeScrollBar(b.offsetTop).top,b.duration,b.easing)}),a.xlist.on("dragStart",function(){a.isBoundryBounce=!1}),a.xlist.on("outOfBoundry",function(){a.isBoundryBounce=!0}),a.xlist.on("scrollEnd",function(b){a.isBoundryBounce||"tapHold"==b.originType||a._moveTo(a.computeScrollBar(-a.xlist.getOffsetTop()).top)}),d(window).on("resize",function(){a._update()}),a.on("afterOffsetTopChange",function(){a._update()}),a.on("afterIndicateHeightChange",function(){a._update()}),a.on("afterContainerHeightChange",function(){a._update()}))},hide:function(){var a=this;a.$scrollbar.css({opacity:0}),a.$scrollbar[0].style.webkitTransition="opacity 0.3s ease-out"},show:function(){var a=this;a.$scrollbar.css({opacity:1})}},{ATTRS:{offsetTop:{value:0},containerHeight:{value:0},indicateHeight:{value:0},barHeight:{value:0},barOffsetTop:{value:0}}});return g},{requires:["node","base","anim"]}); -------------------------------------------------------------------------------- /doc/build/tap-min.js: -------------------------------------------------------------------------------- 1 | /*!build time : 2014-07-18 11:47:56 AM*/ 2 | KISSY.add("kg/xlist/2.0.0/tap",function(a){function b(){if(l.length>2){for(var a=[],b=1;bc?!0:!1}function d(){if(b(),1==l.length)return!1;var a=l[1].startTime-l[0].startTime;return k>a?!0:!1}function e(b){if(b.touches.length>1)return void(m=!1);var c=(b.currentTarget,b.target),d=b.changedTouches[0].clientX,e=b.changedTouches[0].clientY;m={startX:d,startY:e,startTime:Number(new Date),e:b},n&&clearTimeout(n);var c=b.target;n=setTimeout(function(){if(m){var f={};a.mix(f,b),a.mix(f,{type:"tapHold",pageX:d,pageY:e,originalEvent:b}),a.one(c).fire("tapHold",f)}clearTimeout(n)},j)}function f(e){if(m){var f=e.changedTouches[0].clientX,g=e.changedTouches[0].clientY,j=Math.abs(f-m.startX),n=Math.abs(g-m.startY);if(a.mix(m,{endX:f,endY:g,distance:Math.sqrt(j*j+n*n),timeSpan:Number(Number(new Date)-m.startTime)}),m.timeSpan>h)return void(m=!1);if(m.distance>i)return void(m=!1);if(!c(m)){l.push(m),b();var p={};a.mix(p,e),a.mix(p,{type:"tap",pageX:f,pageY:g,originalEvent:e});var q=e.target;return a.one(q).fire("tap",p),o?(d()&&(a.mix(p,{type:"doubleTap"}),a.one(q).fire("doubleTap",p)),clearTimeout(o),void(o=null)):void(o=setTimeout(function(){clearTimeout(o),o=null,a.mix(p,{type:"singleTap"}),a.one(q).fire("singleTap",p)},k))}}}var g=a.all,h=250,i=10,j=750,k=2.0.0,l=[],m=!1,n=null,o=null;a.each(["tap","tapHold","singleTap","doubleTap"],function(b){a.Event.Special[b]={setup:function(){g(this).on("touchstart",e),g(this).on("touchend",f)},teardown:function(){g(this).detach("touchstart",e),g(this).detach("touchend",f)}}})},{requires:["node","event"]}); -------------------------------------------------------------------------------- /doc/demo/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "itemList": [{ 3 | "data":{ 4 | "num": 0 5 | } 6 | },{ 7 | "data":{ 8 | "num": 0 9 | } 10 | },{ 11 | "data":{ 12 | "num": 0 13 | } 14 | },{ 15 | "data":{ 16 | "num": 0 17 | } 18 | },{ 19 | "data":{ 20 | "num": 0 21 | } 22 | },{ 23 | "data":{ 24 | "num": 0 25 | } 26 | },{ 27 | "data":{ 28 | "num": 0 29 | } 30 | },{ 31 | "data":{ 32 | "num": 0 33 | } 34 | },{ 35 | "data":{ 36 | "num": 0 37 | } 38 | },{ 39 | "data":{ 40 | "num": 0 41 | } 42 | },{ 43 | "data":{ 44 | "num": 0 45 | } 46 | },{ 47 | "data":{ 48 | "num": 0 49 | } 50 | },{ 51 | "data":{ 52 | "num": 0 53 | } 54 | },{ 55 | "data":{ 56 | "num": 0 57 | } 58 | },{ 59 | "data":{ 60 | "num": 0 61 | } 62 | },{ 63 | "data":{ 64 | "num": 0 65 | } 66 | },{ 67 | "data":{ 68 | "num": 0 69 | } 70 | },{ 71 | "data":{ 72 | "num": 0 73 | } 74 | },{ 75 | "data":{ 76 | "num": 0 77 | } 78 | },{ 79 | "data":{ 80 | "num": 0 81 | } 82 | },{ 83 | "data":{ 84 | "num": 0 85 | } 86 | },{ 87 | "data":{ 88 | "num": 0 89 | } 90 | }] 91 | } -------------------------------------------------------------------------------- /doc/demo/demo.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-box-sizing: border-box; 3 | -moz-box-sizing: border-box; 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | -ms-touch-action: none; 9 | } 10 | 11 | body,ul,li { 12 | padding: 0; 13 | margin: 0; 14 | border: 0; 15 | } 16 | 17 | body { 18 | font-size: 12px; 19 | font-family: ubuntu, helvetica, arial; 20 | overflow: hidden; 21 | } 22 | 23 | #header { 24 | position: absolute; 25 | z-index: 2; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 45px; 30 | line-height: 45px; 31 | background: #f60; 32 | padding: 0; 33 | color: #eee; 34 | font-size: 20px; 35 | text-align: center; 36 | font-weight: bold; 37 | } 38 | 39 | #footer { 40 | position: absolute; 41 | z-index: 2; 42 | bottom: 0; 43 | left: 0; 44 | width: 100%; 45 | height: 48px; 46 | background: #444; 47 | padding: 0; 48 | border-top: 1px solid #444; 49 | line-height: 48px; 50 | color:#fff; 51 | text-align: center; 52 | } 53 | 54 | #J_List { 55 | position: absolute; 56 | z-index: 1; 57 | top: 45px; 58 | bottom: 48px; 59 | left: 0; 60 | width: 100%; 61 | background: #ccc; 62 | overflow: hidden; 63 | } 64 | 65 | .ks-xlist-container { 66 | position: absolute; 67 | z-index: 1; 68 | -webkit-tap-highlight-color: rgba(0,0,0,0); 69 | width: 100%; 70 | -webkit-transform: translateZ(0); 71 | -moz-transform: translateZ(0); 72 | -ms-transform: translateZ(0); 73 | -o-transform: translateZ(0); 74 | transform: translateZ(0); 75 | -webkit-touch-callout: none; 76 | -webkit-user-select: none; 77 | -moz-user-select: none; 78 | -ms-user-select: none; 79 | user-select: none; 80 | -webkit-text-size-adjust: none; 81 | -moz-text-size-adjust: none; 82 | -ms-text-size-adjust: none; 83 | -o-text-size-adjust: none; 84 | text-size-adjust: none; 85 | } 86 | 87 | .ks-xlist-container li { 88 | width: 100%; 89 | padding: 0 10px; 90 | height: 40px; 91 | line-height: 40px; 92 | border-bottom: 1px solid #ccc; 93 | border-top: 1px solid #fff; 94 | background-color: #fafafa; 95 | } 96 | .ks-xlist-content{ 97 | width: 100%; 98 | } 99 | .ks-xlist-plugin-pulldown-container{ 100 | text-align: center; 101 | width: 100%; 102 | line-height: 50px; 103 | } 104 | .ks-xlist-plugin-pulldown-up .up{ 105 | display: inline; 106 | } 107 | .ks-xlist-plugin-pulldown-up .down{ 108 | display: none; 109 | } 110 | .ks-xlist-plugin-pulldown-down .up{ 111 | display: none; 112 | } 113 | .ks-xlist-plugin-pulldown-down .down{ 114 | display: inline; 115 | } 116 | 117 | .ks-xlist-plugin-pullup-container{ 118 | line-height: 60px; 119 | text-align: center; 120 | } -------------------------------------------------------------------------------- /doc/demo/index.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /doc/demo/scrollbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | scrollbar 9 | 10 | 11 | 12 | 13 |
                14 |
                15 |
                  16 | 17 |
                18 |
                19 |
                20 | 21 | 22 | 23 | 60 | 61 | -------------------------------------------------------------------------------- /doc/guide/dataset.md: -------------------------------------------------------------------------------- 1 | ## DataSet 2 | 3 | 代码示例 4 | 5 | ``` 6 | 7 | KISSY.use(kg/xlist/3.0.3/dataset",function(S,DataSet){ 8 | 9 | var ds = new DataSet(); 10 | 11 | ds.setId(124); 12 | 13 | ds.appendData({row:1}) 14 | 15 | ds.appendData([{row:2},{row:3}]) 16 | 17 | ds.removeData(ds.getId()); 18 | 19 | }) 20 | 21 | ``` 22 | ## Constructor 23 | 24 | ``` 25 | var ds = new DataSet({ 26 | id:"DS_1", 27 | data:[ 28 | {...}, 29 | {...} 30 | ] 31 | }) 32 | 33 | ``` 34 | 35 | ## Method 36 | 37 | ### appendData(Array) 38 | 39 | 插入数据 40 | 41 | ### removeData() 42 | 43 | 清空数据 44 | 45 | ### getData() 46 | 47 | 获取数据 48 | 49 | ### setId(id) 50 | 51 | 设置id 52 | 53 | ### getId() 54 | 55 | 获取id 56 | -------------------------------------------------------------------------------- /doc/index.less: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jackyang-hk/xlist/c026046eb46554db2c5ece290ea15b1749db6707/doc/index.less -------------------------------------------------------------------------------- /doc/lib/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview 3 | * @author 4 | **/ 5 | KISSY.add(function (S, Node,Base) { 6 | var EMPTY = ''; 7 | var $ = Node.all; 8 | 9 | return Base.extend({ 10 | initializer:function(){ 11 | 12 | } 13 | },{ 14 | ATTRS:{ 15 | 16 | } 17 | }) 18 | }, {requires:['node', 'base']}); 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /doc/meta/alias.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'kg/xlist/index': {alias: ['kg/xlist/2.0.0/index']} 3 | }); -------------------------------------------------------------------------------- /doc/meta/modules.js: -------------------------------------------------------------------------------- 1 | config({ 2 | 'kg/xlist/index': {requires: ['node','base']} 3 | }); -------------------------------------------------------------------------------- /doc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xlist", 3 | "version": "3.0.3", 4 | "private": true, 5 | "devDependencies": { 6 | "grunt-contrib-uglify": "~0.2.0", 7 | "grunt": "~0.4.1", 8 | "grunt-kmc": "~0.1.1", 9 | "grunt-contrib-less": "~0.5.0", 10 | "grunt-contrib-copy": "", 11 | "grunt-contrib-clean": "~0.4.0", 12 | "grunt-contrib-cssmin": "~0.5.0" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /doc/plugin/pullup.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @fileoverview 3 | * @author 伯才 4 | * @plugin pullup XLIST上拉加载插件 5 | **/ 6 | ;KISSY.add("kg/xlist/2.0.0/plugin/pullup",function(S, Base, Node) { 7 | var $ = S.all; 8 | var prefix; 9 | var containerCls; 10 | var content = "Pull Down To Refresh"; 11 | var loadingContent = "Loading..."; 12 | 13 | var PullUp = Base.extend({ 14 | initializer: function() { 15 | var self = this; 16 | var xlist = self.userConfig.xlist; 17 | self.userConfig = S.merge({ 18 | content: content, 19 | downContent: "", 20 | upContent: "", 21 | pullUpHeight:40, 22 | loadingContent: loadingContent, 23 | boundry:{}, 24 | prefix: "ks-xlist-plugin-pullup-" 25 | }, self.userConfig); 26 | var height = self.userConfig.height || 60; 27 | prefix = self.userConfig.prefix; 28 | // xlist.userConfig.boundry.bottom = height; 29 | xlist.on("afterRender",function(){ 30 | self.render() 31 | self._bindEvt(); 32 | }) 33 | 34 | 35 | 36 | }, 37 | render: function() { 38 | var self = this; 39 | var containerCls = prefix + "container"; 40 | var tpl = '
                '; 41 | var xlist = self.userConfig.xlist; 42 | var height = self.userConfig.height || 60; 43 | var $pullup = self.$pullup = $("
                ").addClass(containerCls).css({ 44 | "position":"absolute", 45 | "bottom":-height, 46 | "width":"2.0.0%" 47 | }).prependTo(xlist.$ctn); 48 | self.fire("afterRender"); 49 | }, 50 | _bindEvt:function(){ 51 | var self =this; 52 | if(self._evtBinded) return; 53 | var xlist= self.userConfig.xlist; 54 | var $pullup = self.$pullup; 55 | var offsetTop = 0; 56 | 57 | self.on("afterStatusChange", function(e) { 58 | $pullup.removeClass(prefix + e.prevVal).addClass(prefix + e.newVal); 59 | self.setContent(self.userConfig[e.newVal + "Content"]); 60 | }) 61 | 62 | $pullup.addClass(prefix + self.get("status")); 63 | $pullup.html(self.userConfig[self.get("status") + "Content"] || self.userConfig["content"]); 64 | 65 | xlist.on("drag", function(e) { 66 | offsetTop = xlist.getOffsetTop(); 67 | if (offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight) { 68 | //松开加载更多 69 | self.set("status","down") 70 | }else{ 71 | self.set("status","up") 72 | } 73 | }) 74 | 75 | xlist.on("scrollEnd",function(e){ 76 | offsetTop = e.offsetTop 77 | if(offsetTop < xlist.height - xlist.containerHeight - self.userConfig.pullUpHeight){ 78 | self.set("status","loading"); 79 | self.fire("loading",function(){ 80 | 81 | }) 82 | } 83 | }) 84 | 85 | xlist.on("dataChange", function() { 86 | self.set("status","up") 87 | }) 88 | 89 | self._evtBinded = true; 90 | 91 | }, 92 | setContent: function(content) { 93 | var self = this; 94 | if (content){ 95 | self.$pullup.html(content); 96 | } 97 | } 98 | }, { 99 | ATTRS: { 100 | "status": { 101 | value: "up" 102 | } 103 | 104 | } 105 | }) 106 | 107 | return PullUp; 108 | 109 | 110 | }, { 111 | requires: ['base', 'node'] 112 | }); -------------------------------------------------------------------------------- /doc/src/dataset.js: -------------------------------------------------------------------------------- 1 | ;KISSY.add(function(S){ 2 | 3 | var DataSet = function(cfg){ 4 | 5 | this.data = cfg && cfg.data || []; 6 | 7 | this.id = cfg && cfg.id || "_ds_"+Date.now(); 8 | 9 | } 10 | 11 | DataSet.prototype.appendData = function(data){ 12 | this.data = this.data.concat(data) 13 | }; 14 | 15 | DataSet.prototype.removeData = function(){ 16 | this.data = []; 17 | }; 18 | 19 | DataSet.prototype.getData = function(){ 20 | return this.data; 21 | }; 22 | 23 | DataSet.prototype.setId = function(id){ 24 | if(!id) return; 25 | this.id = id; 26 | return this.id; 27 | }; 28 | 29 | DataSet.prototype.getId = function(){ 30 | return this.id; 31 | }; 32 | 33 | 34 | return DataSet; 35 | 36 | }) -------------------------------------------------------------------------------- /doc/src/plugin/console.js: -------------------------------------------------------------------------------- 1 | KISSY.add(function(S,Node,Base){ 2 | var $ = S.all; 3 | var Console = Base.extend({ 4 | pluginId:"xlist/plugin/console", 5 | pluginInitializer:function(xlist){ 6 | var self = this; 7 | var userConfig = self.userConfig; 8 | var xlist = userConfig.xlist; 9 | var $console = $("
                ").css({ 10 | "position": "absolute", 11 | "top":0, 12 | "width": "100%", 13 | // "height": "100%", 14 | "background": "#000", 15 | "opacity":0.5, 16 | "right":0, 17 | "color":"#fff", 18 | "text-align": "center", 19 | "font-size":"28px", 20 | "line-height":"50px", 21 | "z-index": 9999 22 | }).prependTo(xlist.$renderTo); 23 | var cache = Object.keys(xlist.__renderDomRecord).length; 24 | var visibleIndex = Object.keys(xlist.visibleIndex).toString(); 25 | 26 | 27 | 28 | var prev,fps = 0; 29 | var _prev; 30 | xlist.on("itemPop",function(){ 31 | var now = Date.now(); 32 | itemFps = 1000/(now - _prev); 33 | _prev = now; 34 | }) 35 | var velocity; 36 | xlist.on("panEnd",function(e){ 37 | velocity = Math.abs(e.velocityY.toFixed(1)); 38 | }) 39 | 40 | xlist.on("scroll",function(e){ 41 | var v = velocity > xlist.userConfig.maxSpeed ? xlist.userConfig.maxSpeed : velocity; 42 | var now = Date.now(); 43 | 44 | fps = 1000/(now - prev); 45 | prev = now; 46 | var _visibleIndex = Object.keys(xlist.visibleIndex).toString(); 47 | if(_visibleIndex != visibleIndex){ 48 | var num = Object.keys(xlist.__renderDomRecord).length; 49 | $console.html("Dom Num :"+ num+"
                fps:"+ fps.toFixed(1)+"
                PoolFps:"+itemFps.toFixed(1)+"
                Height:"+xlist.userConfig.itemHeight+"px
                PoolNum:"+xlist.itemPool.items.length+"
                Velocity:"+v+"px/ms
                1000/Height*Velocity="+(1000/xlist.userConfig.itemHeight*v).toFixed(1)); 50 | visibleIndex = _visibleIndex; 51 | } 52 | }) 53 | } 54 | }); 55 | 56 | return Console; 57 | 58 | },{ 59 | requires:['node','base'] 60 | }); -------------------------------------------------------------------------------- /doc/test/data.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | function genData(floorId,num){ 3 | var data = []; 4 | for(var i =0;i 2 | 3 | -------------------------------------------------------------------------------- /doc/test/runner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Runner 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /doc/test/runner.js: -------------------------------------------------------------------------------- 1 | KISSY.add(function(){ 2 | //在这里requires需要运行的用例文件 3 | 4 | 5 | },{requires:['test/spec/index-spec']}) -------------------------------------------------------------------------------- /doc/test/spec/index-spec.js: -------------------------------------------------------------------------------- 1 | KISSY.add(function (S, Node,Demo) { 2 | var $ = Node.all; 3 | describe('xlist', function () { 4 | it('Instantiation of components',function(){ 5 | var demo = new Demo(); 6 | expect(S.isObject(demo)).toBe(true); 7 | }) 8 | }); 9 | 10 | },{requires:['node','gallery/xlist/1.0/']}); -------------------------------------------------------------------------------- /doc/totoro-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "runner":"./test/runner.html" 3 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "xlist", 3 | "version": "1.0.0", 4 | "devDependencies": { 5 | "grunt-contrib-uglify": "^0.3.0", 6 | "grunt": "~0.4.1", 7 | "grunt-kmc": "~0.1.1", 8 | "grunt-flexcombo":"", 9 | "grunt-sass":"~0.10.0", 10 | "grunt-contrib-less": "~0.5.0", 11 | "grunt-contrib-copy": "", 12 | "grunt-contrib-clean": "~0.4.0", 13 | "grunt-contrib-cssmin": "~0.5.0", 14 | "grunt-contrib-watch": "" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /totoro-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "runner":"./1.0/test/runner.html" 3 | } --------------------------------------------------------------------------------