在uniapp中写一个简单的分页功能

环境

使用的是HbuilderX编译器,版本是Vue2的uniapp项目,使用到的插件是uniapp自己的uni-ui插件

uni-ui HbuilderX 安装路径 :
https://ext.dcloud.net.cn/plugin?id=55
如果是使用的Vscode编译器,自己百度搜下咋npm,暂时没用到

原理

分页的原理其实很简单,就是把你需要分页的原数据分隔成多个小数组进行展示,我这里是新建了个空数组,每次把需要展示的条数的数据赋值给这个空数组,遍历的时候也是遍历这个空数组。

代码

Vue页面代码(v-for部分就不展示了,把这坨粘到你需要展示分页的地方就行了)

<uni-pagination
              :total="pages.len"
              :current="pages.current"
              @change="pagesChange"
              :pageSize="pages.pageShow"
            >
</uni-pagination>

几个比较重要的属性:

  • total:这个值要和你的原数组的长度相同
  • current: 当前页面,默认设置为1就行了,因为一般一开始展示的都是第一页
  • pageSize: 要分页的数量
  • @change:uni-ui中带的方法,会自动带一个回调函数,回传一个对象。我们可以通过这个对象取到current

Js代码

data(){
	return{
	//* 原始数组数据,太长了 我就不粘贴了 写个名字知道是原数组就行了
		comList:[],
	 //* 分页模块
      pages: {
        len: 0, //* 数据总长度
        pageShow: 3, //* 展示的数据条数
        start: 0,//* 分页开始的位置
        end: 0,//* 分页结束的位置
        current: 1,//* 一开始展示的页面
      },
//* 设置一个展示分页数据的数组
      comPagesList: [],
}
},
mounted(){
	 //*将数组长度赋给len
    this.pages.len = this.comList.length;
    //* 一开始数组结束位置应该为展示的条数
    this.pages.end = this.pages.pageShow;
//* 调用给空数组赋值的方法
  this.assignList();
    
}
methods:{
	 //* 定义一个方法给空数组赋值
    assignList() {
      this.comPagesList = [];
      for (let i = this.pages.start; i < this.pages.end; i++) {
        if (this.comList[i]) {//* 如果comList[i]为空则不进行操作,否则会赋值一堆脏数据
          this.comPagesList.push(this.comList[i]);
        }
      }
    },
    //* 分页的方法
    pagesChange(e) {
      this.pages.end = this.pages.pageShow * e.current;   //* 每次遍历的结尾应该为分页数*当前选取的页数
      this.pages.start = this.pages.end - this.pages.pageShow; //* 每次遍历的开头则应该为结尾减去分页数
      this.assignList();
    },
}

补充

如果想使用原生js来实现分页效果,则需要再定义一个total属性

  this.pages.total =
      this.pages.len % this.pages.pageShow === 0
        ? this.pages.len / this.pages.pageShow
        : this.pages.len / this.pages.pageShow + 1;

计算出分出的页数,再为上一页下一页添加自己的事件

效果图

在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值