最近在做一个线上商城的项目，该项目主要是和微信绑定的，即仅限制在微信浏览器打开
开始并没有找到确定的方案，修改了两天的这个问题，网上所提出的方案都试了一遍，并没有找到合适的解决方法。
（1）采取禁止微信浏览器上滑漏出黑底的方法，这个方法是阻止浏览器的事件冒泡，但是并不理想，因为在阻止滑动时候，再次启动滑动时会产生卡顿现象，就是在第一次启动的时候，页面并不会发生滑动操作，在第二次滑动时才会触发滑动操作。（本人并不建议采用该方法）
//返回角度
function GetSlideAngle(dx, dy) {
return Math.atan2(dy, dx) * 180 / Math.PI;
}
//根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
var dx = endX - startX;
var result = 0;
//如果滑动距离太短
if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
var angle = GetSlideAngle(dx, dy);
if (angle >= 45 && angle < 135) {
//向上
contentScro();
result = 1;
}else if (angle >= -135 && angle < -45) {
// 向下
result = 2;
$('body').unbind('touchmove');
}
return result;
}
//滑动处理
var startX, startY;
document.addEventListener('touchstart',function (ev) {
startX = ev.touches[0].pageX;
startY = ev.touches[0].pageY;
}, false);
document.addEventListener('touchmove',function (ev) {
var endX, endY;
endX = ev.changedTouches[0].pageX;
endY = ev.changedTouches[0].pageY;
GetSlideDirection(startX, startY, endX, endY);
}, false);
function contentScro(){
$('.content').scroll(function(){
var $this =$(this)
, viewH = $(this).height() //视图的可见高度
, contentH = $(this).get(0).scrollHeight //内容高度
, scrollTop =$(this).scrollTop(); //滚动高度
var aTop = contentH - viewH - scrollTop;
// 滚动到底部时禁止浏览器滚动
$('body').bind('touchmove', function (e) {
if(aTop <= 80) {
//当页面滚动到底部时禁止浏览器拖拽
e.preventDefault();
}
});
})
}
（2）第二种方案，因为我的项目是基于angular+ionic 框架开发的，这个框架本身是有滑动惯性的方法（ion-content）但是该方法在加载分页的时候会导致新加载出来的内容，不能及时的滑动页面加载出来。所以此时就用到了 -webkit-overflow-scrolling：touch；属性。
我在做项目时主要分了两种情况
1.底部有导航 无分页
这种情况下就采取 （ion-content）方法
2.有分页 无底部导航
用适配ios系统的滑动惯性方法：
-webkit-overflow-scrolling：touch；
3.底部既有导航又有分页
这个只能使用overflow：auto；了 ，暂时还未找到更合适的解决方案（有大神解决好的，可以在下面留言告诉我哦，一起分享技术~）
网友评论