1.根目录,index.html文件如下设置
<script>
document.body.addEventListener('touchmove', function(e) {
e.preventDefault();
}, {
passive: false
});
</script>
<style>
html,body,#app,.wx-pages{
padding: 0;
margin: 0;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
position: fixed;
width:100%;
top:0;
}
</style>
2.封装一个scroll组件
<style scoped="scoped">
.w-scroll {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style>
<template>
<div ref="scroll" class="w-scroll">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'scroll',
data() {
return {}
},
computed: {},
mounted() {
this.wScroll(this.$refs.scroll);
},
methods: {
wScroll(elem) {
var startX = 0,startY = 0;
document.addEventListener('touchstart', function(evt) {
var touch = evt.touches[0];
startX = Number(touch.pageX);
startY = Number(touch.pageY);
});
elem.addEventListener('touchmove', function(ev) {
var _point = ev.touches[0],
_top = elem.scrollTop;
var _bottomFaVal = elem.scrollHeight - elem.offsetHeight;
//console.log(_top + ":" + _bottomFaVal + ":" + elem.offsetHeight + ":" + elem.scrollHeight);
if(_top === 0) {
if(_point.clientY > startY) {
ev.preventDefault();
} else {
ev.stopPropagation();
}
} else if(_top === _bottomFaVal) {
elem.scrollTop--;
} else if(_top > 0 && _top < _bottomFaVal) {
ev.stopPropagation();
} else {
ev.preventDefault();
}
}, {
passive: false
});
}
},
}
</script>
3.app.vue(因为是全局,所以在app.vue设置了)
<template>
<Scroll id="app" class="wx-pages">
<router-view/>
</Scroll>
</template>
<script>
import Scroll from '@/components/Scroll';
export default {
components:{
Scroll
},
name: 'App',
}
</script>
这个方法在安卓里面下拉到底没办法上拉,然后又用了另一个方式,已经上线了新方法