全網(wǎng)都找了一遍沒有找到符合UI需求的分頁動畫，于是就主動上手了

需求：

1、分頁最多顯示9頁，總頁數(shù)最多顯示無上限；

2、點擊下一頁的時候需要有動畫效果過度，如果當前頁數(shù)是當前顯示最后的一頁，則停了當前顯示最后的位置，但是點擊下一頁的時候需要用戶感知

效果如圖所示：

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: [], // 當前顯示的頁數(shù)組
    }
  },
  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]
      // 當前頁不等于最后一頁，當前頁大于等于展示頁，當前頁大于緩存數(shù)組的最后一頁（確保重復(fù)加入）
      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、引用方式文章來源地址http://www.zghlxwxcb.cn/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>

到了這里，關(guān)于vue 分頁器組件+css動畫效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！