小程序云开发的确提高了不少开发的效率,不用去考虑用什么数据库和用何种方式去连接;也不必为数据库安全操心。但有利也有弊,小程序的获取数据一次的数据列最多也就20条。所以不得不采用分页形式。分页形式网上很多,这里就不讨论的。核心就是得出全部的条数然后再通过循环获得。这里我就直接上我这边的代码。。
//数据初始化
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();
},
上面就是核心代码,比较容易读自己去参详吧。
再给样式吧。。
.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内容
<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>
上面就是简单的不得了的分页,好接下来遇到就是因为数据量大需要在在每条加一个行号,那怎么处理了。经过一轮计算后终于获得行号的计算公式:(当前页)*每页条数+当前记录行号=整体行号。就拿上面的来说行号的计算公式为:
<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 删除。