vue 分页

仅作为自己学习的记录。

html

<nav class="navigation">
  <ul class="pagination">
    <li class="Previous" v-on:click="prev">上一页</li>
    <li>
      <a href="javascript:void(0);" v-for="item in pages" v-on:click="p(item)" v-bind:class="{nowStyle:page == item}"> {{ item }}</a>
    </li>
    <li class="Next" v-on:click="next">下一页</li>
  </ul>
</nav>

css

.navigation {
  display: flex;
  float: right;
  padding-top: 15px;
}
.pagination {
  display: flex;
  li{
    margin-left: 10px;
    cursor: pointer;
    a{
      padding: 2px 6px;
      background: #ededed;
      margin: 0 4px;
    }
    a.nowStyle{
      background: #3dbff5;
      color: #ffffff;
    }
  }
}

js

export default {
  data () {
    return {
      pages: [],
      page: 1,
    }
  },
  created () {
    // 页面加载时获取页数
    var that = this
    var params = {page: 1}
    that.$api.post('###', params, function (req) {
      that.pages = req.content.pages
    })
  },
  methods: {
    // 上一页
    prev () {
      var that = this
      that.page = that.page - 1 < 1 ? 1 : that.page - 1
      that.searchs()
    },
    // 下一页
    next () {
      var that = this
      that.page = parseInt(that.page) + 1 > that.pages ? that.pages : parseInt(that.page) + 1
      that.searchs()
    },
    // 选择第几页
    p (p) {
      var that = this
      that.page = p
      that.searchs()
    },
    // 后台获取页数
    searchs () {
      var that = this
      var params = {page: that.page}
      that.$api.post('###', params, function (req) {
        that.pages = req.content.pages
      })
    }
  }
}

跳转页数版本

html

<nav class="navigation">
  <ul class="pagination">
    <li class="Previous" v-on:click="first">首页</li>
    <li class="Previous" v-on:click="prev">上一页</li>
    <li>
      <a href="javascript:void(0);" class="nowStyle"> {{ page }}</a>
    </li>
    <li><input type="text" class="pageinput" ref="pageinput" @keyup.enter="press"></li>
    <li class="Next" v-on:click="next">下一页</li>
    <li class="Next" v-on:click="last">尾页</li>
  </ul>
</nav>

js

export default {
  data () {
    return {
      pages: [],
      page: 1,
      lists: [],
      pageinput: ''
    }
  },
  created () {
    var that = this
    var params = {page: 1}
    that.$api.post('###', params, function (req) {
      that.pages = req.content.pages
    })
  },
  methods: {
      // 回车跳转
    press () {
      var that = this
      that.pageinput = that.$refs.pageinput.value
      if (that.pageinput <= that.pages) {
        that.page = that.pageinput
        that.searchs()
      }
    },
      // 首页
    first () {
      var that = this
      that.page = that.page - that.page + 1
      that.$refs.pageinput.value = ''
      that.searchs()
    },
      // 尾页
    last () {
      var that = this
      that.page = that.pages
      that.$refs.pageinput.value = ''
      that.searchs()
    },
      // 上一页
    prev () {
      var that = this
      that.page = that.page - 1 < 1 ? 1 : that.page - 1
      that.$refs.pageinput.value = ''
      that.searchs()
    },
      // 下一页
    next () {
      var that = this
      that.page = parseInt(that.page) + 1 > that.pages ? that.pages : parseInt(that.page) + 1
      that.$refs.pageinput.value = ''
      that.searchs()
    },
    searchs () {
      var that = this
      var params = {page: that.page}
      that.$api.post('order/orderList', params, function (req) {
        that.lists = req.content.list
        that.pages = req.content.pages
      })
    }
  }
}