之前在分頁這么一直不知道該怎么去寫，然后上一次問了丑丑蒜埋，然后他給我一解釋淫痰，我好像就會寫了，下面就是具體得寫法整份，
頁面代碼：
?<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,?//條數(shù)
??????TOTAL:?0, //一共多少條數(shù)據(jù)
｝｝
methods：｛
????newsList()?{
???????const?data?=?new?FormData()
???????data.append(
?????????"json",
?????????JSON.stringify({
????????????BI_TYPE:?"0",
????????????PageIndexs:?this.currentPage, //告訴接口幾頁默認(rèn)是一頁
????????????PageSizes:?this.PageSizes, //告訴接口一頁返回幾條數(shù)據(jù)
????????}),
???????)
??????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");
??????});
????},
???//?頁數(shù)變化
????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;
????????}
??????}
????}
??}
后端接口數(shù)據(jù)的返回及傳參：
最后的效果展示如下：
