移动端使用aui-slide轮播图,怎么在手滑轮播图的时候阻值父层容器的滑动事件?
apicloud编程,frame层中使用下拉刷新,组件调用了aui的slide,但是当手滑slider的时候,会导致父级容器也会下拉刷新,在aui-slile的touch事件中加过阻值冒泡的preventDefault和stopPropagation,但是都不能解决,请教大神这个问题应该怎么解决
//aui-slide内部代码
auiSlide.prototype.touchStart = function(event) {
event.preventDefault();
touchStartTime = new Date() * 1;
firstTouchX = parseInt(event.changedTouches[0].pageX);
firstTouchY = parseInt(event.changedTouches[0].pageY);
isScrolling = undefined;
};
auiSlide.prototype.touchMove = function(event) {
event.preventDefault();
var touchMoveObj = event.changedTouches[0],
touchX = parseInt(touchMoveObj.pageX);
touchXDelta = touchX - firstTouchX;
handleTranslateVal = touchXDelta/this.options.friction;
// 滑动位移
offsetX = parseInt(touchMoveObj.pageX) - firstTouchX;
offsetY = parseInt(touchMoveObj.pageY) - firstTouchY;
var direction = this.getDirection(offsetX,offsetY);
if ( typeof isScrolling == 'undefined') {
isScrolling = !!( isScrolling || Math.abs(offsetX) < Math.abs(offsetY) );
}
if(!isScrolling){
event.preventDefault();
if(!this.loop){ //不循环
if(!this.continuous && this.index==1 && direction=='left'){
return;
}
if(!this.continuous && this.index==0 && direction=='right'){
return;
}
if(this.index == this.slideNodeList.length-1){
if(handleTranslateVal <= 0){
return;
}
this.setTranslate(this.getCircle(this.index-1), handleTranslateVal - this.slideWrapWidth, 0);
}else if(this.index == 0){
if(handleTranslateVal >= 0){
return;
}
this.setTranslate(this.getCircle(this.index+1), this.slideWrapWidth, 0);
}
}
this.setTranslate(this.getCircle(this.index-1), handleTranslateVal - this.slideWrapWidth, 0);
this.setTranslate(this.index, handleTranslateVal , 0);
this.setTranslate(this.getCircle(this.index+1), handleTranslateVal + this.slideWrapWidth, 0);
}
};
//外部调用
var slide = new auiSlide({ //主页轮播图
container:document.getElementById("aui-slide"),
"height":160,
"speed":600,
"autoPlay" : 5000,
"pageShow":true,
"pageStyle":'dot',
"loop":true,
'dotPosition':'center'
});
//同时,这个frame层中设置了下拉刷新
api.setRefreshHeaderInfo({
loadingImg: 'widget://image/refresh.png',
bgColor: 'rgb(245,245,245)',
textColor: '#000',
textDown: '下拉刷新...',
textUp: '松开刷新...',
textLoading : '刷新中',
showTime: false
}, function(ret, err) {
var timer = setTimeout(function(){
api.refreshHeaderLoadDone();
},1000);
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论