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

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

浏览量:820 时间: 来源:脱个精光

需求:微信小程序内嵌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                });            }        },    }/script

3 在你所需要的页面引入

templateScrolldiv页面内容div/Scroll/templatescriptimport Scroll from '@/components/Scroll';export default {name: 'Home',components:{            Scroll       },    }/script

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎