vue、带省略分页器

最新推荐文章于 2022-01-18 09:54:09 发布

姽式、

最新推荐文章于 2022-01-18 09:54:09 发布

阅读量375

点赞数 2

分类专栏： vue 文章标签： javascript js vue.js

本文链接：https://blog.csdn.net/weixin_45936690/article/details/105914233

版权

vue 专栏收录该内容

42 篇文章 2 订阅

订阅专栏

效果图：
在这里插入图片描述
下一页：

不符合省略条件：

html：
<div class="Pager">
  <div class="Pager_box">
    <div @click="previous">上一页</div>
    <ul class="Pager_box_list">
      <li v-for="(item,index) in listss" :key="index" :class="item===ind ? 'activation' : ''">{{item}}</li>
    </ul>
    <div @click="next">下一页</div>
  </div>
</div>

js：
export default{
	data(){
		return{
	      list: [1,2,3,4,5,6,7,8,9,10,11], // 原始数组
	      lists: [1,2,3,4,5,6,7,8,9,10,11], // 第二数组
	      listss: [], // 渲染数组
	      index: 7, // 省略长度
	      ind: 1
	    }
	},
  created () {
    if (this.list.length > this.index) {
      var arr = []
      for (var i=0;i<this.list.length;i++) {
        arr.push(this.list[i])
      }
      arr.splice(Math.floor(this.index/2),(arr.length-this.index)+1,'...')
      this.listss = arr
    }
  },
  methods: {
    previous () {
      if (this.ind > 1) {
        this.ind --
        // 改变数组
        this.lists.unshift(this.lists[0]-1)
        this.shuzhu(this.list,this.ind,this.lists)
      } else {
        console.log('第一页')
      }
    },
    next () {
      if (this.ind < this.list.length) {
        this.ind ++
        // 改变数组
        this.lists.shift()
        this.shuzhu(this.list,this.ind,this.lists)
      } else {
        console.log('最后一页')
      }
    },
    shuzhu (arr,index,list) {
      if (index >= arr.length-(this.index-1)) {
        this.listss = []
        var num = this.index
        for (var i=0;i<this.index;i++) {
          this.listss.push(arr[arr.length-num])
          num --
        }
      } else {
        var arrs = []
        for (var i=0;i<list.length;i++) {
          arrs.push(list[i])
        }
        arrs.splice(Math.floor(this.index/2),(arrs.length-this.index)+1,'...')
        this.listss = arrs
      }
    }
  }
}