15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 H5

Vue分页代码的编写

王永康| 发布于 2021-08-19 23:26:18| 559阅读| 0点赞| 0评论
举报

为了页面的美观,通常有页面不能太长,就需要分页功能,来实现页面的跳转

CSS代码:

.page-bar{
		margin:40px auto;
		margin-top: 150px;
		
		}
		ul,li{
		margin: 0px;
		padding: 0px;
		}
		li{
		list-style: none
		}
		.page-bar li:first-child>a {
		margin-left: 0px
		}
		.page-bar a{
		border: 1px solid #ddd;
		text-decoration: none;
		position: relative;
		float: left;
		padding: 6px 12px;
		margin-left: -1px;
		line-height: 1.42857143;
		color: #5D6062;
		cursor: pointer;
		margin-right: 20px;
		}
		.page-bar a:hover{
		background-color: #eee;
		}
		.page-bar a.banclick{
		cursor:not-allowed;
		}
		.page-bar .active a{
		color: #fff;
		cursor: default;
		background-color: #E96463;
		border-color: #E96463;
		}
		.page-bar i{
		font-style:normal;
		color: #d44950;
		margin: 0px 4px;
		font-size: 12px;
		}

vue部分:

data () {
		return {
		all: 10, //总页数
		cur: 1,//当前页码
		totalPage: 0,//当前条数
		}
		},
		methods: {
		//请求数据
		dataListFn: function(index){
		this.$axios.get("http://127.0.0.1:8090/demand/selectListByPage",
		{
		params:{
		page: index,
		limit:'10',
		state: 0
		}
		}).then((res) => {
		if(res.data.message == "success"){
		this.dataList=[];
		for(let i=0;i<res.data.data.length;i++){
		this.dataList.push(res.data.data[i])
		}
		this.all = res.data.totalPage;//总页数
		this.cur = res.data.pageNum;
		this.totalPage = res.data.totalPage;
		}
		
		});
		},
		//分页
		btnClick: function(data){//页码点击事件
		if(data != this.cur){
		this.cur = data
		}
		//根据点击页数请求数据
		this.dataListFn(this.cur.toString());
		},
		pageClick: function(){
		//根据点击页数请求数据
		this.dataListFn(this.cur.toString());
		}
		},
		computed: {
		//分页
		indexs: function(){
		var left = 1;
		var right = this.all;
		var ar = [];
		if(this.all>= 5){
		if(this.cur > 3 && this.cur < this.all-2){
		left = this.cur - 2
		right = this.cur + 2
		}else{
		if(this.cur<=3){
		left = 1
		right = 5
		}else{
		right = this.all
		left = this.all -4
		}
		}
		}
		while (left <= right){
		ar.push(left)
		left ++
		}
		return ar
		}
		}

页面效果:

0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

王永康
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部