E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

需求:微信小程序内嵌H5页面,隐藏下拉出现网址并兼容小米8等特殊浏览器(因为app也用到了这个页面)重点我参考这位大神的解决方案并加以改动 https://www.jianshu.com/p/f8182998895e1 在根目录下的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第一次写 不太会描述  也没有图  希望能帮助到你

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » vue页面在微信浏览器下拉出现网址的解决,并兼容小米8内置浏览器等浏览器页面到底不能滑动问题(因为app也用到了这个页面)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏