vue 分页器组件+css动画效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 分页器组件+css动画效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

全网都找了一遍没有找到符合UI需求的分页动画，于是就主动上手了

需求：

1、分页最多显示9页，总页数最多显示无上限；

2、点击下一页的时候需要有动画效果过度，如果当前页数是当前显示最后的一页，则停了当前显示最后的位置，但是点击下一页的时候需要用户感知

效果如图所示：

vue 分页器组件+css动画效果,vue.js,css,前端

1、代码如下：

 
<template>
  <div><br>当前显示页面{{current}}
    <div class="pagination">
      <div @click="prevPage">上一页</div>
      <div v-for="(item, index) in totalPages" :key="index" :class="{ 'active': current == item }">
        <div v-if="node.indexOf(item) != -1" class="point"></div>
      </div>
      <div @click="nextPage">下一页</div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'Pagination',
  props: {
    totalPages: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number
    }
  },
  data() {
    return {
      current: 1, // 当前选中页
      node: [], // 当前显示的页数组
    }
  },
  methods: {
    prevPage() {
      if (this.current == 1) {
        return
      }
      this.current -= 1
      let noedeIndex = this.node[this.node.length - 1]
      this.$emit('pageChange', this.current)
      if ((noedeIndex - (this.current - 1)) > this.pageSize) {
        this.node.pop() // 删除最后一个
        this.node.unshift(this.current) // 开头插入一个
      }
    },

    nextPage() {
      if (this.current == this.totalPages) {
        return
      }
      this.current += 1
      this.$emit('pageChange', this.current)
      let noedeIndex = this.node[this.node.length - 1]
      // 当前页不等于最后一页，当前页大于等于展示页，当前页大于缓存数组的最后一页（确保重复加入）
      if (this.current > this.pageSize && (this.current > noedeIndex)) {
        this.node.shift() // 删除第一个
        this.node.push(this.current) // 最近最新一个
      }
    },
  },
  mounted() {
    for (let i = 1; i <= this.pageSize; i++) {
      this.node.push(i)
    }
  },
}
</script>

<style lang="less" scoped>
.pagination {
  display: flex;
  width: 100%;
  justify-content: center;
}

.point {
  margin: 0 5px;
  width: 8px;
  height: 8px;
  // margin: -5px 0 0 0;
  border-radius: 50%;
  background: #B5AC97;
  transition: transform 0.3s, background 0.3s;

}

.active .point {
  -webkit-transform: scale3d(1.5, 1.5, 1);
  transform: scale3d(1.5, 1.5, 1);
  // width: 10px;
  // height: 10px;
  background: #FFE6AD;
  box-shadow: 0 0 4px 0 #FFE990;
  animation: 0.3s linear 0s 1 alternate example;

}

@keyframes example {
  0% {
    transform: scale3d(1, 1, 1);
  }

  25% {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.5, 1.5, 1);
  }

  100% {
    transform: scale3d(1.5, 1.5, 1);
  }
}
</style>

2、引用方式文章来源地址https://www.toymoban.com/news/detail-706979.html

 
<template>
	<div>
		<pagination :total-pages="totalPages" :page-size="9" @pageChange="handlePageChange" />
	</div>
</template>
 
<script>
import Pagination from './views/Pagination.vue'

export default {
	components: {
		Pagination
	},
	data() {
		return {
			totalPages: 25,
		}
	},
	computed: {

	},
	methods: {
		handlePageChange(page) {
			console.log('page: ', page);
		}
	}
}
</script>

到了这里，关于vue 分页器组件+css动画效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！