vue页面在微信浏览器下拉出现网址的解决，并兼容小米8内置浏览器等浏览器页面到底不能滑动问题（因为app也用到了这个页面）

需求：微信小程序内嵌H5页面，隐藏下拉出现网址并兼容小米8等特殊浏览器（因为app也用到了这个页面）

重点
我参考这位大神的解决方案并加以改动 https://www.jianshu.com/p/f8182998895e
1 在根目录下的index.html中

html,body,#app,.wx-pages{
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}

2 在components目录下创建组件 Scroll.vue 组件
（你可以直接复制）

<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;
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.stopPropagation();
}
}, {
passive: false
});
}
},
}
</script>

3 在你所需要的页面引入

<template>
<Scroll>
<div>页面内容<div>
</Scroll>
</template>
<script>
import Scroll from '@/components/Scroll';
export default {
name: 'Home',
components:{
Scroll
},
}
</script>

第一次写 不太会描述 也没有图 希望能帮助到你

• 点赞
• 收藏
• 分享
• 文章举报