目录
目录
修改数据表的权限并请求数据
通过按钮点击展示分页效果
把请求到的数据展示在页面上
在下拉触底的时候做分页加载
设置数据加载中和加载完毕的提示
完整代码展示：
修改数据表的权限并请求数据
1.准备工作：新建fenye页面，并导入之前的108条数据
2.改权限
3.初步获取数据，数据库只能加载20条
javascript">
Page({
onLoad: function (options) {
wx.cloud.database().collection('num').get()
.then(res=>{
console.log('成功了',res)
})
.catch(err=>{
console.error('失败了',err)
})
}
通过按钮点击展示分页效果
1.设置了三个按钮，不同值，同一个点击事件触发分页
<button bindtap="getData" data-page="1">加载第一页</button>
<button bindtap="getData" data-page="2">加载第二页</button>
<button bindtap="getData" data-page="3">加载第三页</button>2.利用按钮传回来的值和skip()方法实现动态分页
javascript">Page({
getData(e){
console.log(e.currentTarget.dataset.page)//1 2 3
let page=e.currentTarget.dataset.page-1
wx.cloud.database().collection('num')
.skip(20*page)
.get()
.then(res=>{
console.log('成功了',res)
})
.catch(err=>{
console.error('失败了',err)
})
}点击加载第二页（21-40)的效果
把请求到的数据展示在页面上
1.wxml文件遍历列表
<view wx:for="{{list}}">
<view class="num">
{{item.num}}
</view>
</view>2.设置num的样式
.num{
height: 50px;
background-color: greenyellow;
border-bottom: 1px solid black;
}3.初始化列表并获取数据
javascript">Page({
data:{
list:[]
},
onLoad: function (options) {
this.getList()
},
getList(){
wx.cloud.database().collection('num')
// .skip(40)
.get()
.then(res=>{
console.log('成功了',res)
this.setData({
list:res.data
})
})
.catch(err=>{
console.error('失败了',err)
})
}显示效果：只能看得到前20条数据
在下拉触底的时候做分页加载
因为一次只能展示20条数据，所以定义全局变量page,初始化为0，每下滑一次，page++
显示效果：但并不能保留之前的数据
添加contact（）方法在每一次分页加载的时候保留之前的数据
实现效果：
精进代码——每划一下就更新数据，不局限于一次加载20条，将全局变量page改为list的长度
javascript">Page({
data:{
list:[]
},
onLoad: function (options) {
this.getList()
},
getList(){
let len=this.data.list.length
console.log('当前list的长度',len)
wx.cloud.database().collection('num')
.skip(len)
.get()
.then(res=>{
console.log('成功了',res)
this.setData({
//concat方法能将之前res.data里的数据附着在现在的data后面
list:this.data.list.concat(res.data)
})
})
.catch(err=>{
console.error('失败了',err)
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.getList()
},
})设置数据加载中和加载完毕的提示
加载完毕：
加载中：showLoading()和hideLoading()
完整代码展示：
javascript">Page({
data: {
list: []
},
onLoad: function (options) {
this.getList()
},
getList() {
wx.showLoading({
title: '加载中....',
})
let len = this.data.list.length
console.log('当前list的长度', len)
wx.cloud.database().collection('num')
.skip(len)
.get()
.then(res => {
wx.hideLoading()// 加载成功就隐藏加载中
console.log('成功了', res)
let dataList = res.data//加载最后一页会返回空数据，dataList数组长度为0
if (dataList.length <= 0) {
wx.showToast({
icon: 'none',
title: '没有更多数据了',
})
}
this.setData({
//concat方法能将之前res.data里的数据附着在现在的data后面
list: this.data.list.concat(res.data)
})
})
.catch(err => {
console.error('失败了', err)
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.getList()
},
})
