靖江市建设局网站,山东济南网站建设优化,百度收录排名,ui设计招聘全网都找了一遍没有找到符合UI需求的分页动画#xff0c;于是就主动上手了
需求#xff1a;
1、分页最多显示9页#xff0c;总页数最多显示无上限#xff1b;
2、点击下一页的时候需要有动画效果过度#xff0c;如果当前页数是当前显示最后的一页#xff0c;则停了当前…全网都找了一遍没有找到符合UI需求的分页动画于是就主动上手了
需求
1、分页最多显示9页总页数最多显示无上限
2、点击下一页的时候需要有动画效果过度如果当前页数是当前显示最后的一页则停了当前显示最后的位置但是点击下一页的时候需要用户感知 效果如图所示 1、代码如下 templatedivbr当前显示页面{{current}}div classpaginationdiv clickprevPage上一页/divdiv v-for(item, index) in totalPages :keyindex :class{ active: current item }div v-ifnode.indexOf(item) ! -1 classpoint/div/divdiv clicknextPage下一页/div/div/div
/templatescript
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 - 1let 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 1this.$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)}},
}
/scriptstyle langless 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);}
}
/style2、引用方式 templatedivpagination :total-pagestotalPages :page-size9 pageChangehandlePageChange //div
/templatescript
import Pagination from ./views/Pagination.vueexport default {components: {Pagination},data() {return {totalPages: 25,}},computed: {},methods: {handlePageChange(page) {console.log(page: , page);}}
}
/script
