之前在分页这么一直不知道该怎么去写，然后上一次问了丑丑，然后他给我一解释，我好像就会写了，下面就是具体得写法，
页面代码：
<div class="newsList">
<div class="Journalism">
<div class="title" style="font-size: 24px; height: 44px">
NEWS INFORMATION
</div>
<div class="title" style="font-size: 40px; line-height: 72px">
新闻资讯
</div>
<div class="more" @click="seeMore">
<span>/</span>
<span>了解更多</span>
<img src="@/assets/images/newImg/home/more.png" alt="" />
</div>
<div class="newsBox">
<el-row>
<el-col :span="12" style="padding-right: 30px">
<div class="img-box">
<div class="mask">
<div>{{ newsData[0].BI_TITLE }}</div>
<div>{{ newsData[0].date }}</div>
</div>
</div>
</el-col>
<el-col :span="12">
<time-line
:newsData="newsData"
></time-line>
</el-col>
</el-row>
<el-pagination background layout="prev, pager, next" :total="TOTAL" :page-size='PageSizes' :current-page.sync="currentPage" class="pagination" @current-change="handleSizeChange"></el-pagination>
//:page-size="PageSizes"表示的是一页显示多少条
//:current-page.sync="currentPage"表示的是显示几页
</div>
</div>
</div>
逻辑代码：
data() {
return {
currentPage: 1, //页码
PageSizes: 5, //条数
TOTAL: 0, //一共多少条数据
｝｝
methods：｛
newsList() {
const data = new FormData()
data.append(
"json",
JSON.stringify({
BI_TYPE: "0",
PageIndexs: this.currentPage, //告诉接口几页默认是一页
PageSizes: this.PageSizes, //告诉接口一页返回几条数据
}),
)
Api.newsList(data).then((res) => {
// console.log(res,"home11111");
let newsData = res.data;
newsData.map((item) => {
// console.log(item,"item");
item.date = item.PUSH_DATE;
item.id = item.ID;
item.title = item.BI_TITLE;
item.centent = item.BI_CONTENTS;
item.TNS_IMGPATH = item.BI_IMAGEURL;
});
this.newsData = newsData;
this.TOTAL = Number(res.dataTotal);
// console.log(this.TOTAL, "this.TOTAL");
});
},
// 页数变化
handleSizeChange (value) {
this.currentPage = value
this.newsList()
},
｝
样式代码：
.newsList {
width: 100%;
padding: 100px 0;
.Journalism {
width: 1200px;
margin: 0 auto;
.title {
height: 40px;
font-size: 36px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #000000;
display: flex;
justify-content: center;
}
.more {
width: 100%;
height: 20px;
margin: 20px 0;
border-radius: 13px;
cursor: pointer;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #21589d;
display: flex;
align-items: center;
justify-content: flex-end;
span {
margin-right: 15px;
}
}
.newsBox {
.img-box {
width: 100%;
height: 360px;
background: url("../../../assets/images/newImg/home/news.png")
no-repeat;
background-size: 100% 100%;
position: relative;
.mask {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 90px;
padding: 20px 30px;
background: rgba(33, 88, 157, 0.6);
> div {
font-size: 18px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: left;
color: #ffffff;
letter-spacing: 0px;
}
}
}
}
.JournalismBox {
height: 452px;
margin-top: 40px;
background: #ffffff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
border-radius: 5px;
.JournalismUl {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 30px;
.JournalismLi {
width: 269px;
height: 380px;
cursor: pointer;
.title {
height: 90px;
border-bottom: 1px solid #eeeeee;
display: flex;
flex-direction: column;
.titleTop {
height: 35px;
font-size: 31px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #333333;
}
.titleBotm {
margin-top: 6px;
height: 13px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #999999;
}
}
.content {
height: 107px;
margin-top: 20px;
.contentTitle {
height: 48px;
font-size: 18px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #333333;
line-height: 24px;
display: flex;
justify-content: center;
}
.contentBox {
width: 265px;
height: 80px;
margin-top: 14px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #666666;
line-height: 20px;
text-indent: 47px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.contentImg {
width: 266px;
height: 137px;
margin-top: 11px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.MoreInformation {
margin-top: 10px;
height: 70px;
line-height: 70px;
display: flex;
justify-content: center;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #999999;
cursor: pointer;
}
}
}
}
后端接口数据的返回及传参：
最后的效果展示如下：
