增加新闻分页

king

2021-02-18 7e1e46ff062dcffe4549da8892fed754fa768594

增加新闻分页

 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;