mint的Loadmore组件上拉功能在微信浏览器失效问题以及微信浏览器默认下拉功能问题-一一网

Loadmore组件的上拉功能在微信浏览器不兼容是我没想到的。。。难为了我老半天，还以为代码哪里除了问题，最后在网上找到了解决方案，此文主要是为了记录一下学习内容以及补充一下微信默认下拉功能的禁用和一些注意事项。

在load-more组件的外层盒子上加入此样式，这里建议在外层套一个div单独加。

.view {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
复制代码

原文链接：blog.csdn.net/Nlovely/art…

然后就解决啦

原文是解决此组件在ios端不兼容的问题，我死马当成活马医没想到真成了

但是呢，你会发现，在微信浏览器里，有自带的下拉功能，下拉之后会出现

微信.jpg

出现就算了，主要是会挤掉你loadmore组件的下拉功能，这就很烦。

之所以会出现这个，是跟body被拖动有关系，所以，还要想办法禁用掉微信浏览器自带的下拉功能才算完美。

然后就是禁用微信默认下拉功能的代码。

首先在public文件夹里的index.html文件中加入以下代码，首先禁用默认事件。


    document.body.addEventListener('touchmove', function(e) {
      e.preventDefault(); 
    }, {
      passive: false
    });
复制代码

这时候默认的触屏事件被禁用了，微信默认下拉功能的确是可以禁用掉，但是你还需要在需要有拉动功能的组件里加上触屏事件。

定义一个组件。

<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;
                    //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
                });
            }
        },
    }
</script>
<style scoped="scoped">
    .w-scroll {
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
</style>
复制代码