需求:微信小程序内嵌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; }/styletemplate 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 }); } }, }/script3 在你所需要的页面引入
templateScrolldiv页面内容div/Scroll/templatescriptimport Scroll from '@/components/Scroll';export default {name: 'Home',components:{ Scroll }, }/script第一次写 不太会描述 也没有图 希望能帮助到你













