主要记录在ios浏览器出现触摸无限加载的情况

使用vue-scroller和mescroll.js/mescroll.vue先踩ios浏览器默认滑动会影响mescroll的方法调用。

首先给公共js加入以下代码禁用我们的页面在ios浏览器下会滑动上下页面。

 

 

<script>
//禁止ios手机双击放大以及缩小
window.onload = function () {
// 阻止双击放大
var lastTouchEnd = 0;
document.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
});
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);

// 阻止双指放大
document.addEventListener('gesturestart', function (event) {
event.preventDefault();
});



//在ios浏览器调试的时候禁止页面滚动
var ios = navigator.userAgent.indexOf('iPhone');//判断是否为ios
if (ios != -1) {
//ios下运行
var scroll = document.getElementById("scroll")//你需要滑动的dom元素
touchScroll(scroll);
}

var canScroll = true;
function touchScroll(el) {
canScroll = false;
//el需要滑动的元素
el.addEventListener('touchmove', function (e) {
canScroll = true;
})
document.body.addEventListener('touchmove', function (e) {
//       alert(canScroll);
if (!canScroll) {
e.preventDefault(); //阻止默认事件(上下滑动)
} else {
//需要滑动的区域
var top = el.scrollTop; //对象最顶端和窗口最顶端之间的距离
var scrollH = el.scrollHeight; //含滚动内容的元素大小
var offsetH = el.offsetHeight; //网页可见区域高
var cScroll = top + offsetH; //当前滚动的距离

//被滑动到最上方和最下方的时候
if (top == 0) {
top = 1; //0～1之间的小数会被当成0
} else if (cScroll === scrollH) {
el.scrollTop = top - 0.1;
}
}
}, { passive: false }) //passive防止阻止默认事件不生效
}
}

</script>

 

 

 

 

下面给body设置样式：

 

 
html,
body {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}

 

 

接下来就是vue页面使用vue-scroller或者mescroll.js/mescroll.vue;

 

mescroll.js

 

 

<template>
<div class="bg-box">
<div id="mescroll" class="mescroll">
<div>
<mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit" class="scrollView">
<div class="invoiceList">
<div v-for="(item,index) in invoiceList" class="invoiceList-box" :key="index">
<a :class="item.isShow?'items-selected':'items'" @click="onItemClick(item,index)"></a>
<div class="information">
<p class="numvber">单号：{{item.OrderNo}}</p>
<p><span class="icon1"></span>始发地 ———— 目的地</p>
<p><span class="icon2"></span>件数 : {{item.Pse}}件</p>
<p><span class="icon2"></span>重量 : {{item.Weight}}KG</p>
<p class="invoicedate">{{item.DownOrderTime}}</p>
</div>
<p class="price">￥{{item.TotalMoney}}</p>
</div>
</div>
</mescroll-vue>
</div>
</div>
</div>
</template>

<script>
import MescrollVue from "mescroll.js/mescroll.vue";
export default {
c