Mint UI 之loadmore组件的坑：内部元素头部被遮挡了一部分

Posted 2020-11-23 whitewen

前端经常会遇到数据分页加载的需求，mint-ui组件为大家提供了loadmore组件

但是我在使用的时候，遇到了一个问题：写好布局和样式以及逻辑之后，我的mt-loadmore标签的头部总是不顶在父元素content的顶部，给了padding也不管用;看了下mint-loadmore-top样式有.mint-loadmore-top { margin-top: -50px; }但这个不能改,改了后下拉显示更多...就会一直显示.

网上看到说添加:auto-fill:"false"结果还是一样的.但是发现了内容被隐藏的原因: 在页面首次加载的时候,在自己的请求代码中执行了that.$refs.loadmore.onBottomLoaded()在内容填充后, 让标签上移50px,导致了顶部被遮住

mintloadmore 部分源码:

onBottomLoaded: function onBottomLoaded() {
      var this$1 = this;

      this.bottomStatus = 'pull';
      this.bottomDropped = false;
      this.$nextTick(function () {
        if (this$1.scrollEventTarget === window) {
          document.body.scrollTop += 50;
        } else {
          this$1.scrollEventTarget.scrollTop += 50;
        }
        this$1.translate = 0;
      });
      if (!this.bottomAllLoaded && !this.containerFilled) {
        this.fillContainer();
      }
    }

知道了问题产生的原因是: 在初始化的时候执行了that.$refs.loadmore.onBottomLoaded(),name解决的办法就是在上拉或者下拉的时候给请求列表函数传入一个flag,只有在这时候,才执行;而在初始化的时候,不传参数,不执行.

    created() {
      token = localGet('token');
      showListNum = localGet('showListNum');
      this.getList(); // 这里不传参数
    },
    methods: {
        getList(drop) {
            axios(...)
            .then(() => {
                if(drop){
                  that.$refs.loadmore.onTopLoaded();
                  that.$refs.loadmore.onBottomLoaded();
                }
                currentpageindex++;
            })
        },
        loadtop(){
            currentpageindex = 1;
            this.getList('drop'); // 这里传入布尔值为true的任何值
        },
        loadbottom(){
            this.getList('drop'); // 这里传入布尔值为true的任何值
        }
    }