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的任何值
}
}