最近在做一個(gè)線上商城的項(xiàng)目，該項(xiàng)目主要是和微信綁定的，即僅限制在微信瀏覽器打開
開始并沒有找到確定的方案，修改了兩天的這個(gè)問題，網(wǎng)上所提出的方案都試了一遍，并沒有找到合適的解決方法。
（1）采取禁止微信瀏覽器上滑漏出黑底的方法，這個(gè)方法是阻止瀏覽器的事件冒泡，但是并不理想，因?yàn)樵谧柚够瑒?dòng)時(shí)候，再次啟動(dòng)滑動(dòng)時(shí)會(huì)產(chǎn)生卡頓現(xiàn)象，就是在第一次啟動(dòng)的時(shí)候，頁面并不會(huì)發(fā)生滑動(dòng)操作，在第二次滑動(dòng)時(shí)才會(huì)觸發(fā)滑動(dòng)操作。（本人并不建議采用該方法）
//返回角度
function GetSlideAngle(dx, dy) {
return Math.atan2(dy, dx) * 180 / Math.PI;
}
//根據(jù)起點(diǎn)和終點(diǎn)返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑動(dòng)
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
var dx = endX - startX;
var result = 0;
//如果滑動(dòng)距離太短
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;
}
//滑動(dòng)處理
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 //內(nèi)容高度
, scrollTop =$(this).scrollTop(); //滾動(dòng)高度
var aTop = contentH - viewH - scrollTop;
// 滾動(dòng)到底部時(shí)禁止瀏覽器滾動(dòng)
$('body').bind('touchmove', function (e) {
if(aTop <= 80) {
//當(dāng)頁面滾動(dòng)到底部時(shí)禁止瀏覽器拖拽
e.preventDefault();
}
});
})
}
（2）第二種方案，因?yàn)槲业捻?xiàng)目是基于angular+ionic 框架開發(fā)的，這個(gè)框架本身是有滑動(dòng)慣性的方法（ion-content）但是該方法在加載分頁的時(shí)候會(huì)導(dǎo)致新加載出來的內(nèi)容，不能及時(shí)的滑動(dòng)頁面加載出來。所以此時(shí)就用到了 -webkit-overflow-scrolling：touch；屬性。
我在做項(xiàng)目時(shí)主要分了兩種情況
1.底部有導(dǎo)航 無分頁
這種情況下就采取 （ion-content）方法
2.有分頁 無底部導(dǎo)航
用適配ios系統(tǒng)的滑動(dòng)慣性方法：
-webkit-overflow-scrolling：touch；
3.底部既有導(dǎo)航又有分頁
這個(gè)只能使用overflow：auto；了 ，暫時(shí)還未找到更合適的解決方案（有大神解決好的，可以在下面留言告訴我哦，一起分享技術(shù)~）
