HbuderX（uni-app）分页器封装

哈贝#

已于 2024-05-09 17:14:42 修改

阅读量260

点赞数 1

CC 4.0 BY-SA版权

文章标签： uni-app javascript 前端

于 2024-03-19 09:31:06 首次发布

本文链接：https://blog.csdn.net/2201_75410538/article/details/136828934

本文介绍了如何在Vue项目中封装一个可自定义的分页组件，通过props接收参数并计算出显示的页码范围，实现下拉箭头的动态展示，适用于数据列表的分页浏览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件封装

<template>
	<view>
		<view class="pagination">
		    <!-- 上 -->
		    <button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">
		      上一页
		    </button>
		   <button v-if="startNumAndEndNum.start > 1" @click="$emit('getPageNo', 1)" :class="{ active: pageNo == 1 }">
		      1
		    </button>
		    <button v-if="startNumAndEndNum.start > 2">···</button>
		    <!-- 中间部分 -->
		    <button v-for="(page, index) in startNumAndEndNum.showArray" :key="index" 
		      @click="$emit('getPageNo', page)" :class="{ active: pageNo == page }">
		      {{ page }}
		    </button>
	
		    <!-- 下 -->
		    <button v-if="startNumAndEndNum.end < totalPage - 1">···</button>
		    <button v-if="startNumAndEndNum.end < totalPage" @click="$emit('getPageNo', totalPage)" :class="{active:pageNo==totalPage}">
		      {{ totalPage }}
		    </button>
		    <button :disabled="pageNo == totalPage"  @click="$emit('getPageNo', pageNo + 1)">
		      下一页
		    </button>
			<br>
		    <text style="margin-left: 30px;display: inline-block;margin-top: 15px;">共 {{ total }} 条</text>
		  </view>
	</view>
</template>
 
<script>
	export default {
		name: "Pagination",
		  props: ["pageNo", "pageSize", "total", "continues"],
		  computed: {
		    //总共多少页
		    totalPage() {
		      //向上取证
		      return Math.ceil(this.total / this.pageSize);
		    },
		    //计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是5]
		    startNumAndEndNum() {
		      const { continues, pageNo, totalPage } = this;
		      //先定义两个变量存储起始数字与结束数字
		      let start = 0,
		        end = 0;
		      //连续页码数字5【就是至少五页】，如果出现不正常的现象【就是不够五页】
		      //不正常现象【总页数没有连续页码多】
		      if (continues > totalPage) {
		        start = 1;
		        end = totalPage;
				let showArray = Array.from({length: totalPage}, (v, i) => start + i)
				return { start, end, showArray};
		      } else {
		        //正常现象【连续页码5，但是你的总页数一定是大于5的】
		        //起始数字
		        start = pageNo - parseInt(continues / 2);
		        //结束数字
		        end = pageNo + parseInt(continues / 2);
		        //把出现不正常的现象【start数字出现0|负数】纠正
		        if (start < 1) {
		          start = 1;
		          end = continues;
		        }
		        //把出现不正常的现象[end数字大于总页码]纠正
		        if (end > totalPage) {
		          end = totalPage;
		          start = totalPage - continues + 1;
		        }
				let showArray = Array.from({length: end}, (v, i) => start + i)
				for(let i=0;i<showArray.length;i++){
					if(showArray[i]>end){
						showArray.splice(i-showArray.length)//修改页码不正常
					}
				}
				return { start, end, showArray};
		      }
		    },
		  },
	}
</script>
 
<style lang="scss" scoped>
.pagination {
  text-align: center;
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;
 
    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }
 
    &.active {
      cursor: not-allowed;
      background-color: #409eff;
      color: #fff;
    }
  }
}
.active{
  background: skyblue;
}
</style>

应用组件内引入

	import  pagePaging   from "组件地址"

template中

		<pagePaging
		 :pageNo="searchParams.pageNo"
		  :pageSize="searchParams.pageSize"
		  :total="total"
		  :continues="4"
		@getPageNo="getPageNo" />

script中

data() {
			return {
				searchParams: {
					pageNo: 1,
					pageSize: 5,
				},
				list: [],
				total: '',
			}
		},	methods: {
			getPageNo(pageNo) {
				this.searchParams.pageNo = pageNo
				this.getList()
			},
			getList() {
			获取列表接口
			}
		}