vue+ts实现的原生分页功能

由于项目需求,需要一个分页功能,没有合适的轮子,只好自己造一个了。

1.html方面

  

class是通过动态绑定实现首页 上一页 下一页 末页的切换的

2.数据

  // 这里是数据来源
	  private list = [
		...
	  ];
      private totalPage: number = 1; //几页
	  private currentPage: number = 1; //当前页
	  private pageSize = 1; //每页显示数量
	  private newList: any = []; //当前页显示内容
	  private isDisabled: string = ""; //上一页下一页
	  private ispage: string = "first"; //首末页
  
  思路:
  1. 在生命周期函数mounted计算总总页数,并且初始化数据,
  2. 这里我们写了一个方法来获取数据(也就是对list进行处理)
  3. 在点击上一页下一页的时候切换当前页即可改变数据
  4. 首页和末页通过,通过改变当前页为start和end即可
 

3.具体脚本实现
vue+ts实现的原生分页功能_第1张图片
1.mounted中获取总页数,调用方法来初始化数据

vue+ts实现的原生分页功能_第2张图片

2.翻页功能,其实就是改变了当前页的数值

结果长这个样子
vue+ts实现的原生分页功能_第3张图片

完整代码




你可能感兴趣的:(vue,原生分页功能-ts版)