外层html、body等设为不可滚动,ps:#app为vue项目基础DOM;.wx-pages为App.vue内部路由
html,body,#app,.wx-pages{
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
在public/index.html里移除touchmove事件
document.body.addEventListener('touchmove', function(e) {
e.preventDefault();
}, {
passive: false
});
写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>
在需要滚动的模块中使用Scroll包起来
<style scoped>
</style>
<template>
<Scroll style="margin-bottom: 20px;background-color: #f2f2f2;">
内容
</Scroll>
</template>
<script>
import Scroll from '@/components/Scroll';
export default {
components:{
Scroll
},
}
</script>
可以直接加到App.vue里面,可以直接解决全局此问题
<template>
<Scroll id="app">
<router-view class="wx-pages" />
</Scroll>
</template>
至此,完成,在微信浏览器中下拉不会再出现“网页由XXX提供,QQ浏览器X5内核提供技术支持”