效果图
初始:
加载数据后:
数据全部加载完成:
代码如下( vue代码 )
template部分
<template>
<div class="asideMian">
<div class="centerBox">
<div class="title">订单信息</div>
<div class="main">
<div class="listTl">
<div class="item">充电桩编号</div>
<div class="item">通道</div>
<div class="item">耗电量(kw/h)</div>
<div class="item">充电金额</div>
<div class="item">创建时间</div>
</div>
<div class="listBox">
<div class="list" v-for="(item, index) in getOrdtimeList" :key="index">
<div class="item">{{ item.devnum }}</div>
<div class="item">{{ item.devorder }}</div>
<div class="item">{{ item.chargepower }}</div>
<div class="item">{{ item.payfee}}</div>
<div class="item">{{ item.createtime }}</div>
</div>
<div class="lists">
<div class="loadings" v-if="getOrdtimeList.length < sitePageSize.totalCount" @click="getSiteDelList">点击加载</div>
<div class="nope" v-else>见底了~~</div>
</div>
</div>
</div>
</div>
</div>
</template>
script部分
<script>
export default {
data() {
return {
getOrdtimeList: [],
sitePageSize: {
pageSize: 2,
currentPage: 1,
totalCount: 0
}
}
},
mounted() {
this.getOrdtimePage()
},
methods: {
// 分页
getOrdtimePage() {
const par = {
pagenum: this.sitePageSize.currentPage,
pagesize: this.sitePageSize.pageSize
}
const url = 'httpxxxxxxxxxxxxxxxxxxxxx'
this.$axios.post(url, par).then(res => {
//res.data 接口返回的数据
this.getOrdtimeList = [...this.getOrdtimeList, ...res.data]
this.sitePageSize.totalCount = res.data.totalCount
})
},
// 加载
getSiteDelList() {
if (this.getOrdtimeList.length < this.sitePageSize.totalCount) {
this.sitePageSize.currentPage = this.sitePageSize.currentPage + 1
this.getOrdtimePage()
}
}
}
}
</script>
style部分:
<style lang="scss" scoped>
.asideMian {
width: 30%;
padding: 10px 0;
margin: 0 auto;
background-color: rgb(0, 0, 0);
.centerBox {
.main {
width: 100%;
margin-top: 10px;
//列表高度 自定义
height: 140px;
.item {
text-align: center;
width: 15%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:nth-of-type(1) {
width: 20%;
}
&:nth-of-type(2) {
width: 15%;
}
&:nth-of-type(3) {
width: 15%;
}
&:nth-of-type(4) {
width: 20%;
}
&:nth-of-type(5) {
width: 28%;
}
}
.listTl {
background: rgba(21, 77, 160, 0.2);
height: 40px;
line-height: 40px;
color: rgba(216, 240, 255, 0.8);
display: flex;
font-size: 12px;
}
.listBox {
height: calc(100% - 36px);
overflow-y: auto;
//设置滑动样式
&::-webkit-scrollbar {
width: 5px;
background-color: #edf3f9;
margin-bottom: 10px;
}
&::-webkit-scrollbar-thumb {
width: 5px;
background: rgba(195, 216, 240, 1);
border-radius: 0.25rem;
margin-bottom: 10px;
}
&::-webkit-scrollbar-track {
width: 5px;
background: #edf3f9;
margin-bottom: 10px;
}
.list {
height: 34px;
line-height: 34px;
color: rgba(216, 240, 255, 0.8);
display: flex;
font-size: 12px;
cursor: pointer;
}
.lists {
height: 34px;
font-size: 12px;
.loadings,
.nope {
text-align: center;
height: 34px;
line-height: 34px;
color: rgba(216, 240, 255, 0.8);
}
.loadings {
cursor: pointer;
}
.nope {
color: rgba(216, 240, 255, 0.5);
}
}
.list:hover {
background: linear-gradient(270deg, rgba(26, 123, 230, 0) 0%, rgba(69, 193, 255, 0.7) 100%);
}
}
}
}
}
</style>