|
一、触底自动加载数据
1.js文件中顶部添加以下代码
const db = wx.cloud.database()
const data = db.collection('数据库中要引入的集合名')
var row = 5 //每次从数据库中加载的条数
var pages = 0 //当前页面
2.在onLoad函数中添加数据库查询命令
onLoad: function (options) {
news.limit(row).get({
success: res =>{
that.setData({
dataList: res.data
})
}
})
},
3.触底自动加载设置
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
//翻下一页
pages++
//获取当前页面的新闻记录
data.skip(row * pages).limit(row).get({ //skip(row * pages)：查询结果跳过row * pages条记录
success: res =>{
//获取原有的新闻记录
let old_data = this.data.dataList
// 获取新页面的新闻记录
let new_data = res.data
//更新首页新闻列表
this.setData({
dataList: old_data.concat(new_data) //concat()用于连接字段或字符
})
}
},
二、手动刷新数据
1.制作页面刷新按钮
//xx.wxml文件
<image slot="left" src="../../../images/shuaxin.png" class="refresh" animation="{{animation}}" bindtap="refresh"></image>
2.刷新按钮的动画和页面中信息的加载
//xx.js文件
var _animation; // 动画实体
var _animationIndex = 0; //动画执行次数index（当前执行了多少次）
var _animationIntervalId = -1; // 动画定时任务id，通过setInterval来达到无限旋转，记录id,用于结束定时任务
const _ANIMATION_TIME = 300; //动画播放一次的时长ms
Page({
/**
* 页面的初始数据
*/
data: {
page: 0,
pageCount: 6,
haveMoreData: true,
loadMore: false,
loading: false,
refresh: false,
}
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
_animationIndex = 0;
_animationIntervalId = -1;
this.data.animation = '';
_animation = wx.createAnimation({
duration: _ANIMATION_TIME,
timingFunction: 'linear',
delay: 0,
transformOrigin: '50% 50% 0'
})
this.refresh()
},
/**
* 实现image旋转动画，每次旋转120*n度
*/
rotateAni: function (n) {
_animation.rotate(120 * (n)).step()
this.setData({
animation: _animation.export()
})
},
/**
* 开始旋转
*/
startAnimationInterval: function () {
var that = this;
that.rotateAni(++_animationIndex); //进行一次旋转
_animationIntervalId = setInterval(function () {
that.rotateAni(++_animationIndex);
}, _ANIMATION_TIME); //每间隔 _ANIMATION_TIME进行一次旋转
},
/**
* 停止旋转
*/
stopAnimationInterval: function () {
if (_animationIntervalId > 0) {
clearInterval(_animationIntervalId);
_animationIntervalId = 0;
}
},
/**
* 自定义函数--点击刷新按钮
*/
refresh() {
if (this.data.loading) {
return
}
this.setData({
refresh: true,
})
this.startAnimationInterval();
this.getList();
},
/**
* 自定义函数--获取数据库数据
*/
getList() {
if (this.data.loading) {
return
} else {
this.setData({
loading: true
})
}
var currentPage = this.data.page;
// 如果是刷新，要设置请求的页码为0
if (this.data.refresh) {
currentPage = 0;
}
db.collection('data')
.orderBy('_openid', 'desc') // 降序排列
.skip(currentPage * this.data.pageCount)
.limit(this.data.pageCount)
.get()
.then(res => {
console.log("getList:", res)
if (this.data.refresh) {
this.setData({
list: []
})
}
if (res.data.length > 0) {
for (var i = 0; i < res.data.length; i++) {
res.data[i].createTime = this.js_date_time(res.data[i].createTime);
this.data.list.push(res.data[i])
}
this.setData({
list: this.data.list
})
this.setData({
refresh: false,
loading: false,
page: currentPage + 1
})
if (res.data.length == this.data.pageCount) {
this.setData({
haveMoreData: true
})
} else {
this.setData({
haveMoreData: false
})
}
}
this.stopAnimationInterval();
})
.catch(error => {
console.log("getList error:", error)
this.stopAnimationInterval();
this.setData({
refresh: false,
loading: false
})
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if (this.data.loading) {
return
} else {
this.setData({
loadMore: true
})
setTimeout(() => {
this.getList();
}, 3000);
}
},
|