vue 分页

 

html

 

  

    
上一页
    

       {{ item }}
    
    
下一页
  

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

 

  

    
首页
    
上一页
    

       {{ page }}
    
    

    
下一页
    
尾页
  

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
      })
    }
  }
}