之前开发app的时候，遇到了这样一个问题，app中的首页有一个导航栏，这里要求可以滑动，因此这一块由原生去做，但是其他部分则是由后h5前端实现，因为该页面就造成了原生，h5混合的情况。而这个页面又包含了轮播图，因为也涉及到滑动。原生在这个页面阻止的滑动事件，导致出现轮播图无法手动滑动的问题。经过跟安卓端开发人员沟通了解后，采用了以下的解决方案进行进行修复：
$('.w').on('touchstart touchend' ,function(event) {
bindEvent();
});
//touchstart事件
function touchSatrtFunc(evt) {
var mTop =$('.shop-index-active')[0].offsetTop;
try {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0];//获取第一个触点
var x = Number(touch.pageX);//页面触点X坐标
var y = Number(touch.pageY);//页面触点Y坐标
//记录触点初始位置
startX =x;
startY =y;
if (y -mTop >0) {
Bridge.run('jsSetDisallowWebViewInterceptTouchEvent',{
request:'false'
});
}else {
Bridge.run('jsSetDisallowWebViewInterceptTouchEvent',{
request:'true'
});
}
}catch (e) {
alert('touchSatrtFunc：' + e.message);
}
}
function touchMoveFunc(evt) {
try {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0];//获取第一个触点
var x = Number(touch.pageX);//页面触点X坐标
var y = Number(touch.pageY);//页面触点Y坐标
}catch (e) {
alert('touchMoveFunc：' + e.message);
}
}
//touchend事件
function touchEndFunc(evt) {
try {
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
}catch (e) {
alert('touchEndFunc：' + e.message);
}
}
//绑定事件
function bindEvent() {
document.addEventListener('touchstart',touchSatrtFunc,false);
document.addEventListener('touchmove',touchMoveFunc,false);
document.addEventListener('touchend',touchEndFunc,false);
}
以上代码的思路就是：通过检测手指触摸的位置判断原生是否禁用滑动。
网友评论