From 7e1e46ff062dcffe4549da8892fed754fa768594 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 18 二月 2021 12:15:58 +0800
Subject: [PATCH] 增加新闻分页
---
src/views/news/index.vue | 35 ++++++++++++++++++++++++++++++-----
1 files changed, 30 insertions(+), 5 deletions(-)
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
index d9027b7..3bac108 100644
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@@ -13,7 +13,7 @@
<div class="tab-content">
<ul class="news_ul">
- <li v-for="(item, index) in news" :key="index" @click="jumpmenu(item)">
+ <li v-for="(item, index) in pages" :key="index" @click="jumpmenu(item)">
<h3>
<img :src="item.Image1" alt="">
</h3>
@@ -26,6 +26,15 @@
</div>
</li>
</ul>
+ <el-pagination
+ background
+ layout="prev, pager, next"
+ hide-on-single-page
+ @current-change="changePage"
+ :current-page="pageIndex"
+ :page-size="9"
+ :total="news ? news.length : 0">
+ </el-pagination>
</div>
</div>
</div>
@@ -37,12 +46,22 @@
return {
cur: 0,
tabs: null,
- news: null
+ news: null,
+ pageIndex: 1,
+ pages: null
}
},
methods: {
+ changePage (page) {
+ this.pages = []
+ if (this.news) {
+ this.pages = this.news.slice((page - 1) * 9, page * 9)
+ }
+ },
changetab (i) {
this.cur = i
+ this.pageIndex = 1
+ this.news = null
this.loaddata()
},
jumpmenu (item) {
@@ -68,7 +87,6 @@
}
}
sessionStorage.removeItem('newstype')
- console.log(this.cur)
} catch (e) {}
this.loaddata()
@@ -81,6 +99,11 @@
}
this.Service.getParamData(param).then(res => {
this.news = res.News
+
+ this.pages = []
+ if (this.news) {
+ this.pages = this.news.slice(0, 9)
+ }
})
}
},
@@ -165,7 +188,8 @@
}
}
.is-background {
- display: none;
+ margin: 30px 0;
+ text-align: center;
}
button {
width: 50%;
@@ -274,7 +298,8 @@
display: none;
}
.is-background {
- margin: .8rem 3rem;
+ margin: 30px 0 60px;
+ text-align: center;
}
.active {
background: #20B7FE;
--
Gitblit v1.8.0