html5调用qq浏览器,记一次Vue项目解决微信浏览器下拉“网页由xxx提供，QQ浏览器X5内核提供技术支持”...

外层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组件

.w-scroll {

height: 100%;

overflow: auto;

-webkit-overflow-scrolling: touch;

}

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

});

}

},

}

在需要滚动的模块中使用Scroll包起来

内容

import Scroll from '@/components/Scroll';

export default {

components:{

Scroll

},

}

可以直接加到App.vue里面，可以直接解决全局此问题

至此，完成，在微信浏览器中下拉不会再出现“网页由XXX提供，QQ浏览器X5内核提供技术支持”