hellow world

  1 var Slider;
  2 (function(){
  3 
  4     Slider = function(opt){
  5         this.el = opt.sliderEl;                //模板容器
  6         this.idx = opt.current;                //设定初始索引
  7         this.callBack = opt.callBack;
  8         
  9         this.dataIdx = [];                    //缓存索引数据
 10         this.dataModule = {};                //缓存数据对象
 11         this.setDataModule(opt.dataModule);
 12 
 13         //初始化
 14         this.init();
 15     };
 16     
 17     //数据处理
 18     Slider.prototype.setDataModule = function(data){
 19         if (!data) return;
 20         for (var i = 0, len = data.length; i < len; i++) {
 21             var d = data[i];
 22             if (!d) { continue; }
 23             this.dataIdx.push( d.id );
 24             this.dataModule[ d.id ] = d;
 25         }
 26     };
 27 
 28     Slider.prototype.init = function(){
 29         //渲染模板
 30         this.renderTpl();
 31 
 32         //设定滚动高度
 33         this.scaleH = this.el.getElementsByTagName(‘li‘)[0].clientHeight + 1; //1px border
 34         
 35         //初始总偏移量
 36         this.scrollY = 0;
 37         
 38         //绑定事件
 39         this.bindEvent();
 40 
 41     };
 42     
 43     //渲染模板
 44     Slider.prototype.renderTpl = function(){
 45         var data = this.dataIdx,
 46             el = this.el,
 47             dataArr = [‘<ul>‘];
 48         for (var i = 0, len = data.length; i < len; i++) {
 49             var id = data[i],
 50                 d = this.dataModule[id];
 51             if (!d) continue;
 52             dataArr.push( this.setTpl(d) );
 53         }
 54         dataArr.push(‘</ul>‘)
 55         el.innerHTML = dataArr.join(‘‘);
 56         
 57         //模板渲染完成后，设定初始选定项
 58         el.getElementsByTagName(‘li‘)[ this.idx ].className = ‘item current‘;
 59         var cid = data[this.idx],
 60             cdata = this.dataModule[cid];
 61         this.callBack(cdata);
 62     };
 63     
 64     //普通list模板
 65     Slider.prototype.setTpl = function(data){
 66         return ‘<li class="item" data-val="‘+ data.id +‘">￥&nbsp;‘+ data.showPrice +‘</li>‘;
 67     };
 68     
 69 
 70     //绑定事件
 71     Slider.prototype.bindEvent = function(){
 72         
 73         var self = this,
 74             el = this.el,
 75 
 76             //手指按下
 77             startHandler = function(event){
 78                 //记录手指按下的坐标
 79                 self.startY = event.touches[0].pageY;
 80                 //清除偏移量
 81                 self.offsetY = 0;
 82                 //事件对象
 83                 self.target = event.target;
 84 
 85             },
 86             //手指移动
 87             moveHandler = function(event){
 88                 event.preventDefault();
 89 
 90                 //计算手指的偏移量
 91                 self.offsetY = event.targetTouches[0].pageY - self.startY;
 92 
 93                 //当前偏移量 + 总偏移量
 94                 var scrollHeight = self.offsetY + self.scrollY;
 95                 
 96                 el.style.webkitTransform = ‘translate3d(0, ‘+ scrollHeight +‘px, 0)‘;
 97                 
 98             },
 99             //手指抬起
100             endHandler = function(event){
101                 event.preventDefault();
102 
103                 //记录滑动边界，用于判定滑动的类型
104                 var boundary = self.scaleH / 2;
105 
106                 if (self.offsetY > boundary) {
107                     self.setIndex(‘-1‘);
108                 } else if (self.offsetY < 0 && self.offsetY < -boundary) {
109                     self.setIndex(‘+1‘);
110                 } else {
111                     self.setIndex(‘0‘);
112                 }
113 
114             };
115 
116             //绑定事件
117             el.addEventListener(‘touchstart‘, startHandler);
118             el.addEventListener(‘touchmove‘, moveHandler);
119             el.addEventListener(‘touchend‘, endHandler);
120     };
121 
122     //滑动
123     Slider.prototype.setIndex = function(n){
124         var el = this.el;
125 
126         //情景一：偏移量太小，偏移回原始位置即可
127         if (n == ‘0‘){
128             el.style.webkitTransform = ‘translate3d(0, ‘+ this.scrollY +‘px, 0)‘;
129             return;
130         }
131 
132         //情景二：依照滚动的间距计算
133         var liEl = el.getElementsByTagName(‘li‘),
134             liLen = liEl.length;
135         //在改变 this.idx 之前要去掉 当前 idx 的 current 状态
136         liEl[this.idx].className = ‘item‘;
137 
138         var maxY = this.scaleH * -(liLen - 2),
139             minY = this.scaleH,
140             boundary = this.scaleH / 2,
141             d = Math.abs( this.offsetY % this.scaleH ), //取模 -- 偏移量
142             offIdx = Math.abs( this.offsetY / this.scaleH );        //取值 -- 偏移量
143         //四舍五入取 idx
144         if (d > boundary) {
145             offIdx = Math.ceil(offIdx);
146         } else {
147             offIdx = Math.floor(offIdx);
148         }
149         this.idx = this.idx + (n * offIdx); //重置 idx 索引
150         
151         if (n == ‘+1‘){
152             scrollHeight = (-n * this.idx) * this.scaleH + (n * this.scaleH);
153         } else {
154             scrollHeight = (n * this.idx) * this.scaleH - (n * this.scaleH);
155         }
156         
157         if (this.idx < 0) { 
158             scrollHeight = minY;
159             this.idx = 0;
160         } else if (this.idx >= liLen) {
161             scrollHeight = maxY;
162             this.idx = liLen - 1;
163         }
164         
165         this.scrollY = scrollHeight;
166         
167         var li = liEl[this.idx],
168             cId = li.getAttribute(‘data-val‘),
169             currentItemData = this.dataModule[cId];
170         li.className = ‘item current‘;
171         
172         el.style.webkitTransform = ‘translate3d(0, ‘+ scrollHeight +‘px, 0)‘;
173         
174         this.callBack(currentItemData);
175     };
176     
177 })();