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

Posted whitewen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Mint UI 之loadmore组件的坑:内部元素头部被遮挡了一部分相关的知识,希望对你有一定的参考价值。

前端经常会遇到数据分页加载的需求,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的任何值
        }
    }    

以上是关于Mint UI 之loadmore组件的坑:内部元素头部被遮挡了一部分的主要内容,如果未能解决你的问题,请参考以下文章

Mint UI 的 Infinite scroll 无限滚动组件 一直触发 loadMore

Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法

mint-ui的Loadmore组件使用示例

vue移动端Ui组件 mint-ui 使用指南

vue2 mint-ui loadmore(下拉刷新,上拉更多)

Vue-上拉加载与下拉刷新(mint-ui:loadmore)一个页面使用多个上拉加载后冲突问题