手机端全屏滑动方法

Posted 2020-08-01 卷柏的花期

最近做了一个手机端的微信分享领红包的项目，在这个项目中需要用到一个全屏滑动的功能，所以自己就根据网上查找的相关资料再通过自己的改造，封装了一个滑动的插件，这个插件可以实现以下几个功能：

• 　　指定水平/垂直滑动
• 　　指定滑动的回调函数

下面是具体的代码：

  1 ;(function(root){
  2     ‘use strict‘;
  3      function touch(opts){
  4 
  5         this.canvas = opts.dom;
  6         this.section = opts.section;
  7         this.direc = opts.direc || ‘vertical‘;
  8         this.fn = opts.fn || null;
  9         this.canvas && this.bindEvent();
 10         this.section && this.init();
 11     }
 12 
 13     touch.prototype.init=function(){
 14 
 15         this.width = (window.innerWidth > 640)? 640:window.innerWidth;
 16         this.height = window.innerHeight;
 17         this.boundary = this.height/6;
 18         this.index = 0;
 19 
 20         this.canvas.style.cssText = ‘position:relative‘;
 21         if(this.direc != ‘horiz‘)
 22             for(var i=0,l=this.section.length;i<l;i++){
 23                 this.section[i].style.cssText=‘position:absolute;‘;
 24                 this.section[i].style.webkitTransform = "translate3d(0,"+i*this.height+"px,0)";
 25             }
 26         else{
 27             for(var i=0,l=this.section.length;i<l;i++){
 28                 this.section[i].style.cssText=‘position:absolute;‘;
 29                 this.section[i].style.webkitTransform = "translate3d("+i*this.width+"px,0,0)";
 30             }
 31         }
 32 
 33     };
 34 
 35     touch.prototype.bindEvent=function(){
 36 
 37         var _this = this;
 38         var startx=0,starty=0,startTime=0,endTime=0,offset=0,offsety = 0;
 39 
 40         function start(e){
 41 
 42             startx = e.touches[0].pageX;
 43             starty = e.touches[0].pageY;
 44             startTime = new Date()*1;
 45             
 46         }
 47 
 48         function move(e){
 49 
 50             _this.offsetx = e.touches[0].pageX - startx;
 51             _this.offsety = e.touches[0].pageY - starty;
 52             var i = _this.index -1,
 53                 m = i +3;
 54             if(_this.direc != ‘horiz‘){
 55                 for(;i<m;i++){
 56                     _this.section[i] && (_this.section[i].style.webkitTransform = ‘translate3d(0,‘+ ((i - _this.index)*_this.height + _this.offsety) +‘px,0)‘);
 57                     _this.section[i] && (_this.section[i].style.webkitTransition = ‘none‘);
 58                 }
 59             }else{
 60                 for(;i<m;i++){
 61                     _this.section[i] && (_this.section[i].style.webkitTransform = ‘translate3d(‘+ ((i - _this.index)*_this.width + _this.offsetx) +‘px,0,0)‘);
 62                     _this.section[i] && (_this.section[i].style.webkitTransition = ‘none‘);
 63                 }
 64             }
 65             e.preventDefault();
 66             e.stopPropagation();
 67 
 68         }
 69 
 70         function end(){
 71 
 72             endTime = new Date()*1;
 73 
 74             function handle(value){
 75                 if(endTime - startTime > 800){
 76 
 77                     if(value > _this.boundary){
 78                         _this.go(‘-1‘);
 79                     }else if(value < -_this.boundary){
 80                         _this.go(‘+1‘);
 81                     }else{
 82                         _this.go(‘0‘);
 83                     }
 84                 }else{
 85 
 86                     if(value>50){
 87 
 88                         _this.go(‘-1‘);
 89                     }else if(value <-50){
 90                         _this.go(‘+1‘);
 91                     }else{
 92                         _this.go(‘0‘);
 93                     }
 94                     _this.offsetx = 0;
 95                     _this.offsety = 0;
 96                 }
 97             }
 98 
 99             (_this.direc != ‘horiz‘)?handle(_this.offsety):handle(_this.offsetx);
100 
101 
102         }
103 
104         this.canvas.addEventListener(‘touchstart‘,start,false);
105         this.canvas.addEventListener(‘touchmove‘,move,false);
106         this.canvas.addEventListener(‘touchend‘,end,false);
107     };
108 
109 
110     touch.prototype.go=function(n){
111         
112         var index = this.index+n*1,
113             len = this.section.length,
114             _this = this;
115 
116         if(index>len-1){
117             index = len-1;
118         }else if(index <=0){
119             index = 0
120         }
121 
122         function callBack(){
123             _this.fn(index,_this.section[index],_this.section,_this.canvas);
124             this.removeEventListener(‘webkitTransitionEnd‘,callBack,false);
125         }
126 
127         this.section[index].style.webkitTransition = ‘-webkit-transform .4s ease-out‘;
128         this.section[index-1] && (this.section[index-1].style.webkitTransition = ‘-webkit-transform .4s ease-out‘);
129         this.section[index+1] && (this.section[index+1].style.webkitTransition = ‘-webkit-transform .4s ease-out‘);
130         this.section[index].style.webkitTransform = ‘translate3d(0,0,0)‘;
131 
132         if(this.direc != ‘horiz‘){
133             this.section[index-1] && (this.section[index-1].style.webkitTransform = ‘translate3d(0,‘+-this.height+‘px,0)‘);
134             this.section[index+1] && (this.section[index+1].style.webkitTransform = ‘translate3d(0,‘+this.height +‘px,0)‘);
135         }else{
136             this.section[index-1] && (this.section[index-1].style.webkitTransform = ‘translate3d(‘+-this.width+‘px,0,0)‘);
137             this.section[index+1] && (this.section[index+1].style.webkitTransform = ‘translate3d(‘+this.width +‘px,0,0)‘);
138         }
139 
140         this.index = index;
141         this.section[index].addEventListener(‘webkitTransitionEnd‘,callBack,false);
142     };
143 
144     root.touch = function(p){
145         new touch(p);
146     };
147 
148 })(window);

调用方法：

 1 touch({
 2    ‘dom‘:document.querySelector(‘.box‘),
 3    ‘section‘: document.querySelector(‘section‘),
 4    ‘direc‘:‘horiz‘,
 5    ‘fn‘:function(i,t,s,box){}
 6 });
 7  /* {} 一个对象，用于提供设置的参数。
 8       |— dom : 所有分屏的外层包裹盒子。
 9       |— section : 所有分屏。
10       |— direc : 滑屏的方向:horiz(水平滑动，最大宽度为640)、vertical(垂直滑动)。默认值为vertical。
11       |- fn : 滑动后的回调函数，i(索引)、t(当前分屏)、s(所有的分屏)、box(分屏的外层包裹盒子)
12  */