无论有多少条数据,最初只显示八条,点击加载更多后,每次多展示五条数据
静态页面html:
<div class="message-con" v-loading="Loading" v-if="activeIndex == 0">
<surveyItem
v-for="(consensusItem, consensusIndex) in consensus"
:key="consensusIndex"
:itemArticle="consensusItem"
:gaPaths="'行业观察' + tabname"
:tips_="true"
:index ='consensusIndex'
>
</surveyItem>
<div
class="search-more"
@click="searchMore"
v-show="consensus != 0 && isLoading"
>
<span>加载更多</span>
<em class="search-more-icon"></em>
</div>
<div class="search-more" v-show="consensus != 0 && !isLoading">
<span>已加载全部</span>
</div>
<div class="search-more" v-show="consensus == 0">
<span>暂无数据</span>
</div>
</div>
在接口部分进行限制:
$axios.post("/Main/action/Dashboard/Homepage/getNewsList", {
type: 2,
ald_type: 2,
size: 8,
page: 1,
}),
其中size:8限制了最初渲染的数据条数
方法部分:
searchMore() {
if (this.activeIndex == 0) {
this.consensusSize += 5;
this.getInfor(2, this.consensusSize);
}
}
this.consensusSize += 5;表明如果点击了加载更多,使展示条目加5
其中data return中要声名{
consensus: [],
consensusSize: 8,
}