前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序分页及行号公式

小程序分页及行号公式

原创
作者头像
谭广健
发布2022-06-25 14:49:10
5130
发布2022-06-25 14:49:10
举报
文章被收录于专栏:谭广健的专栏

小程序云开发的确提高了不少开发的效率,不用去考虑用什么数据库和用何种方式去连接;也不必为数据库安全操心。但有利也有弊,小程序的获取数据一次的数据列最多也就20条。所以不得不采用分页形式。分页形式网上很多,这里就不讨论的。核心就是得出全部的条数然后再通过循环获得。这里我就直接上我这边的代码。。

代码语言:javascript
复制
//数据初始化
data: {
		page_now: 0,//当前页
		totalCount: 0,//数据总数
		pageSize: 15,//每页显示条数
		Person_info: []//记录内容
},
//获取记录总数
getdata() {
 var that = this;
		db.collection('Person_DB').count({
			success: function (res) {				
				var yeshu = Math.ceil(res.total / that.data.pageSize)
				that.setData({
					totalCount:res.total,
					yeshu: yeshu
				})
				that.show_page();
			}
		})
},
//每页显示的数据
show_page(e) {
		var that = this,
			page_now = this.data.page_now,
			pageSize = this.data.pageSize;
		db.collection('Person_DB')
			.orderBy('strdate', 'desc')
			.skip(page_now * pageSize) //从第几个数据开始
			.limit(pageSize)
			.get().then(res => {
				console.log(res);
				if (res.data.length != 0) {
					that.setData({
						Person_info: res.data
					})
				} else {
					wx.showModal({
						content: '没有找到相关资料',
						showCancel: false
					})
				}
			});
},
topClick() {
		console.log("上一页");
		var page_now = this.data.page_now-1;
		if(page_now<0){
			app.show_win("已是第一页")
			return;
		}
		this.setData({
			page_now: page_now
		})
		this.show_page();
	},
	downClick() {		
		console.log("下一页")
		var page_now = this.data.page_now+1;		
		if(page_now>=this.data.yeshu){
			app.show_win("已是最后一页")
			return;
		}
		this.setData({
			page_now: page_now
		})
		this.show_page();
	},

上面就是核心代码,比较容易读自己去参详吧。

再给样式吧。。

代码语言:javascript
复制
.pagenum {
	font-size: calc(28vmin / 7.5);
	text-align: center;
	margin-top: calc(40vmin / 7.5);
	margin-bottom: calc(40vmin / 7.5);
}

.pagenum label {
	margin-left: calc(40vmin / 7.5);
}

.topcl {
	width: calc(130vmin / 7.5);
	line-height: calc(70vmin / 7.5);
	display: inline-block;
	background: #C0C0C0;
	border-radius: 7px
}

分页wxml内容

代码语言:javascript
复制
<block wx:if="{{Person_info.length!=0}}">
	<view class="pagenum">
		<text>共{{yeshu}}页/当前{{page_now+1}}页</text>
		<block wx:if="{{yeshu!=1}}">
			<label bindtap="topClick" class="topcl">上一页</label>
			<label bindtap="downClick" class="topcl">下一页</label>
		</block>
	</view>
</block>

上面就是简单的不得了的分页,好接下来遇到就是因为数据量大需要在在每条加一个行号,那怎么处理了。经过一轮计算后终于获得行号的计算公式:(当前页)*每页条数+当前记录行号=整体行号。就拿上面的来说行号的计算公式为:

代码语言:javascript
复制
<label style="width: 60rpx;font-size: 30rpx;font-weight: bold;">{{(page_now)*pageSize+(index+1)}}</label>

可能有同学问问什么要index+1,因为循环是从0开始,所以要加+1,代表1开始。

好了就这样吧。。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
作者已关闭评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档