纯前端实现分页器--------任何项目直接套用ul li版本

文章讲述了在Vue项目中，如何在index.vue文件中通过前端处理因为后端未提供数据而自动生成报警列表，并实现分页功能。展示了HTML结构、Script部分的逻辑以及CSS样式。

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

哈哈哈哈哈其实是因为后端没提供数据，所以前端只能自己搞一个！欢迎交流，指导~

在index.vue文件中实现：

1.HTML部分

<!-- 数据 -->
<view class="alarmList">
    <ul v-if="alarmArry.length>0">
		<li class="alamBttomLi" v-for="(item,key) in pagedAlarmArry" :key="item.id">
		  <view class="alamBttomText">
			<text>{{item.robot_name}}  {{item.alarminfo}}</text>
			<text>{{item.alarmtime}}</text>
		  </view>
		</li>
	 </ul>

	 <ul v-else  class="alamBttomLi1">
		<li>暂无数据</li>
	 </ul>
</view>
<!-- 分页器 -->
<view class="pageBox">
   <button class="Previous" @click="prevPage" :disabled="currentPage === 1">
     <uni-icons type="back" size="20"></uni-icons>
   </button>
   <view class="pagination" v-for="page in totalPages" :key="page">
	 <button class="paginationBtn"  @click="changeToPage(page)" :class="{ active: page === currentPage }">{{ page }}</button>
   </view>
   <button class="Nextpage" @click="nextPage" :disabled="currentPage === totalPages">
     <uni-icons type="forward" size="20"></uni-icons>
   </button>
</view>

2. Script部分

<script>
 export default{
	data(){
	   return{
		  alarmArry:[], //数据信息
		  pageSize: 5, // 每页显示条数
		  currentPage: 1, // 当前页码
	   }
	},
	onShow() {
	   this.alarm() //数据信息
	},
	mounted() {
			this.alarm() //告警信息
	},
	computed: {
	  totalItems() {
		 return this.alarmArry.length; // 总数据条数
	  },
	  totalPages() {
		 return Math.ceil(this.totalItems / this.pageSize); // 总页数
	  },
	  pagedAlarmArry() {
		 const start = (this.currentPage - 1) * this.pageSize;
		 const end = start + this.pageSize;
		 return this.alarmArry.slice(start, end); // 当前页的数据
	  },
	},
   methods:{
	//分页器
	 prevPage() {
	   if (this.currentPage > 1) {
		  this.currentPage--;
	   }
	 },
	 nextPage() {
	   if (this.currentPage < this.totalPages) {
		  this.currentPage++;
	   }
	 },
	changeToPage(page) {
	   if (page === '...') {
		  return;
		}
	  this.currentPage = page;
	},
	//数据信息
	alarm(){
                alamMessage(this.token,this.secretKey,this.selectedRobotId,this.alarmtime).then(Response => {
	    this.alarmArry = Response.rows
	    this.total = Response.total
    })
},	
		}
	}
</script>

3.css部分

	//分页器
	.pageBox{
		width: 360rpx;
		margin-top: 44rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		//background-color: chocolate;
	}
	//上一页
	.Previous{
		width: 40rpx;
		height: 40rpx;
		background: #EDEDED;
		border: 1px solid #000000;
		border-radius: 4rpx;
		font-size: 8rpx;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	//下一页
	.Nextpage{
		width: 40rpx;
		height: 40rpx;
		border: 1px solid #142150;
		border-radius: 4rpx;
		font-size: 8rpx;
		color: #666666;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.paginationBtn{
		width: 40rpx;
		height: 40rpx;
		font-size: 16rpx;
		font-family: Myriad Pro;
		font-weight: 400;
		color: #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
		border: 1px solid #142150;
		border-radius: 4rpx;
	}
	.active{
		width: 40rpx;
		height: 40rpx;
		background: #142150;
		border-radius: 4rpx;
		font-size: 16rpx;
		font-family: Helvetica;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

最后看成品：注省略的页码只有在页数多的时候才会出现哦！请多指教~