项目场景:
基于vue2的avue中的消息通知组件avue-notice中【加载更多】字样的显隐控制
问题描述
【加载更多】的隐藏,avue官网中没有详细描述,消息加载完成后还有改按钮。
解决方案:
查看avue的源码了解其实是有显隐控制的
<div :class="b('more')"
v-if="!finish"
v-loading="loading"
@click="handleClick">
加载更多
</div>
最终代码:
<avue-notice
:data="data"
:option="option"
:finish="finish" //控制加载更多的显隐,false隐藏
@click="handleDeleteNotice" //点击消息是触发事件,事件中逻辑为将消息标为已读
@page-change="pageChange" //点击加载更多时触发的事件
></avue-notice>
/**
*加载更多的触发事件
*/
pageChange (){
this.loading = false;
this.size = this.size +10; //每次多获取10条数据
getNotices(this.current,this.size).then((res) => { //调用接口获取数据
this.data = res.data.data.records; //将获取的数据给到消息组件绑定的data
this.num = res.data.data.total; //该全局变量表示消息按钮上方的气泡显示的数值,即为未读消息的总数
if(this.num === this.data.length){ //未读消息的总数与显示数据数量相同时
this.finish = true; //隐藏加载全部按钮
this.$message.success('已加载全部');
}
this.loading = true;
});
}