在使用apicloud开发app的时候会遇到这样的问题,左右滑动轮播图会和下拉刷新冲突,还有左右滑动轮播图也会和frame本身的左右滑动切换冲突,经过自己研究记录下一些解决方法
1.监听触摸事件禁止和恢复下拉刷新
2.监听触摸事件禁止frame的左右滑动切换
3.在轮播图频繁滑动问题中会出现问题,使用了函数防抖
4.还有轮播图上滑的时候页面滚动有点问题,图片轮播也在切换,这个问题还未处理(??)
/**
* 移动端轮播图
* 这里上滑还有点问题,左右轮播带点上滑
* @type {{touch: (boolean|*), slider: HTMLElement | null, clientWidth: number, events: {index: number, scrollWidth: number, icons: HTMLElement | null, icon: NodeListOf<HTMLElementTagNameMap[string]>, handleEvent: slider.events.handleEvent, start: slider.events.start, move: slider.events.move, end: slider.events.end}, initStyle: slider.initStyle, init: slider.init}}
*/
var slider = {
//判断设备是否支持touch事件
touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
slider: document.getElementById('slider'),
clientWidth: document.body.clientWidth,
//事件
events:{
index:0, //显示元素的索引
// scorllWidth: this.clientWidth, // 一次滚动的距离, 这里的this到底指向谁,获取不到slider对象的数据???如何获取
// slider:this.slider, //this为slider对象
scrollWidth: document.body.clientWidth,
icons:document.getElementById('icons'),
icon:this.icons.getElementsByTagName('span'),
sliderTimer: null, // 是否可以轮播滚动,函数防抖控制
handleEvent:function(event){
var self = this; //this指events对象
if(event.type == 'touchstart'){
console.log('touchstart')
self.start(event);
}else if(event.type == 'touchmove'){
console.log('touchmove')
self.move(event);
}else if(event.type == 'touchend'){
console.log('touchend')
self.end(event);
}
},
//滑动开始
start:function(event){
// 阻止frame的默认滑动
api.setFrameGroupAttr({
name: 'group',
scrollEnabled: false
});
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch,取第一个touch
startPos = {x:touch.pageX,y:touch.pageY,time:+new Date}; //取第一个touch的坐标值
console.log(JSON.stringify(startPos))
isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
document.getElementById('sliderWrapper').addEventListener('touchmove',this,false);
document.getElementById('sliderWrapper').addEventListener('touchend',this,false);
},
//移动
move:function(event){
//当屏幕有多个touch或者页面被缩放过,就不执行move操作
if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
var touch = event.targetTouches[0];
endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
console.log(JSON.stringify(endPos))
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0; //isScrolling为1时,表示纵向滑动,0为横向滑动
if (isScrolling == 0) {
// 水平滑动禁止frame上下抖动
api.setFrameAttr({
name: 'findMusicFrm0',
bounces: false
})
}
},
//滑动释放
end:function(event){
var self = this;
var duration = +new Date - startPos.time; //滑动的持续时间
console.log(isScrolling);
if(isScrolling === 0){ //当为水平滚动时, 这里添加一个函数节流
clearTimeout(self.sliderTimer);
self.sliderTimer = setTimeout(function () {
// console.log(this); // 定时器里面的this指向window
self.icon[self.index].className = '';
if(Number(duration) > 10){
//判断是左移还是右移,当偏移量大于10时执行
if(endPos.x > 20){ // 写小了上滑会翻页
console.log("右滑");
if(self.index !== 0) self.index -= 1;
}else if(endPos.x < -20){
console.log("左滑");
if(self.index !== self.icon.length-1) self.index += 1;
}
}
self.icon[self.index].className = 'curr';
document.getElementById('slider').className = 'cnt f-anim';
document.getElementById('slider').style.left = -self.index * self.scrollWidth + 'px';
// 恢复frame的默认滑动
api.setFrameGroupAttr({
name: 'group',
scrollEnabled: true
})
// 恢复水平滑动禁止frame上下抖动
api.setFrameAttr({
name: 'findMusicFrm0',
bounces: true
})
}, 500)
}
//解绑事件
document.getElementById('sliderWrapper').removeEventListener('touchmove',this,false);
document.getElementById('sliderWrapper').removeEventListener('touchend',this,false);
}
},
// 初始化样式
initStyle: function() {
var lis = document.querySelectorAll('#slider li');
var len = lis.length;
document.querySelector('.m-slider').style.width = this.clientWidth + 'px';
document.querySelector('#slider').style.width = (this.clientWidth * len) + 'px';
for (var i = 0; i < len; i++) {
lis[i].style.width = this.clientWidth + 'px';
}
},
//初始化
init:function(){
var self = this; //this指slider对象
self.initStyle();
if(!!self.touch) {
document.getElementById('sliderWrapper').addEventListener('touchstart', self.events);
} //addEventListener第二个参数可以传一个对象,会调用该对象的handleEvent属性
}
};
slider.init();