不需要那种滑动切换幻灯片的，可以看成一个宽度很大的元素，手指拨打可以左右水平切换的。
这些都不适用（或者我不会用）: swipe.js , touch.js , iscroll.js
我自己写的滑动组件：
关键是保存上一次 touchMove 的 位置 ，但是优化还是不够好。
代码如下：
/** * Created by Administrator on 2016/8/12. */ function Slider(opts){ //¹¹Ô캯ÊýÐèÒªµÄ²ÎÊý this.wrap = opts.dom; this.dire = opts.direction; this.addtion = opts.addtion; this.bindDOM(); } Slider.prototype.bindDOM = function(){ var self = this; var moveP; //ÊÖÖ¸°´ÏµĴ¦Àíʼþ var startHandler = function(evt){ if(moveP.x) console.log(moveP) self.startX = moveP.x ? moveP.x : evt.touches[0].pageX; self.startY = moveP.y ? moveP.y : evt.touches[0].pageY; console.log("start X" + self.startX) }; var moveHandler = function(evt){ //¼æÈÝchrome android£¬×èÖ¹ä¯ÀÀÆ÷ĬÈÏÐÐΪ evt.preventDefault(); moveP.x = evt.targetTouches[0].pageX; moveP.y = evt.targetTouches[0].pageY; } // console.log(self.dire) if(self.dire === 'horizon'){ if(Math.abs(moveP.x-self.startX) > Math.abs(moveP.y - self.startY)){ // move horizontal self.offsetX = moveP.x - self.startX; if(self.offsetX > 550){self.offsetX = 300;} if(self.offsetX < 0){ // change transform style with offsetX console.log('enter right 2 left') // console.log('curr offset X ' + self.offsetX) self.wrap.style.webkitTransition = ('-webkit-transform 0s ease-out'); self.wrap.style.webkitTransform = ('translate3d(' + self.offsetX + 'px, 0, 0)'); } else{ console.log( ' enter left 2 right '+ self.offsetX) if (self.wrap.style.webkitTransform >= 0) { self.wrap.style.webkitTransition = ('-webkit-transform 0s ease-out'); self.wrap.style.webkitTransform = ('translate3d(0px,0,0)'); // self.addtion.style.webkitTransform = ('translate3d(0px,0,0)'); }; self.wrap.style.webkitTransition = ('-webkit-transform 0s ease-out'); self.wrap.style.webkitTransform = ('translate3d(' + (self.offsetX)+ 'px, 0, 0)'); } } } else if(self.dire === 'vertical'){ if(Math.abs(moveP.x-self.startX) < Math.abs(moveP.y - self.startY)){ // move horizontal self.offsetY = moveP.y - self.startY; if(self.offsetY < 0){ // change transform style with offsetX // console.log('curr offset Y ' + self.offsetY) console.log('down to up') self.wrap.style.webkitTransition = ('-webkit-transform 0s ease-out'); self.wrap.style.webkitTransform = ('translate3d(0px,'+ self.offsetY +'px,0)'); self.addtion.style.webkitTransform = ('translate3d(0px,'+ self.offsetY +'px,0)'); }else{ console.log('up to down') var fixed_body = document.getElementById('fixed-body'); if(fixed_body.style.webkitTransform.indexOf('-') > 0){ self.wrap.style.webkitTransition = ('-webkit-transform 0s ease-out'); self.wrap.style.webkitTransform = ('translate3d(0px,0,0)'); self.addtion.style.webkitTransform = ('translate3d(0px,0,0)'); } } } } document.getElementById('swipe_table_title').style.position = 'fixed !important'; document.getElementById('fixed_table_title').style.position = 'fixed !important'; console.log(moveP.x) }; new Slider({ dom : document.getElementById('swipe_table'), direction : 'horizon' }); new Slider({ dom : document.getElementById('fixed-body'), direction : 'vertical', addtion : document.getElementById('swiper-body') }); new Slider({ dom : document.getElementById('swiper-body'), direction : 'vertical', addtion : document.getElementById('fixed-body') });
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你可以用手机效果touchslide.js,网址http://www.superslide2.com/，有用法，不行的话你就zepto.js,这个是针对手机端的。
如果是ionic的话，可以用这个指令`
var slidingTabsDirective = angular.module("ionic").directive('ionSlideTabs', ['$timeout', '$compile', '$interval', '$ionicSlideBoxDelegate', '$ionicScrollDelegate', '$ionicGesture', function($timeout, $compile, $interval, $ionicSlideBoxDelegate, $ionicScrollDelegate, $ionicGesture) {
}]);
slidingTabsDirective.directive('ionSlideTabLabel', [ function() {
}]);
`