极客观点
项目管理
HarmonyOS
不需要那种滑动切换幻灯片的，可以看成一个宽度很大的元素，手指拨打可以左右水平切换的。
这些都不适用（或者我不会用）: 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')
});
html5
你可以用手机效果touchslide.js,网址http://www.superslide2.com/，有用法，不行的话你就zepto.js,这个是针对手机端的。