今天写代码时突发奇想我要把一个列表页的,onShow,onPullDownRefresh,和onReachBottom里加载数据的事件写成一个共同的方法来调用。而三个方法的不同之处在于onShow是每次页面显示时要刷新数据,取得最新的n条数据,而onPullDownRefresh是页面下拉时也是要刷新,但不同之处在于数据刷新完成后应该停止下拉执行wx.stopPullDownRefresh();而onReachBottom是页面上拉触底时应该去取跳过已经加载到页面里的数据外的下一个n条数据。
云函数
const cloud = require('wx-server-sdk')
cloud.init();
const db = cloud.database()
const _ = db.command
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
switch (event.acType) {
case 'add':
{
//插入记录固定增加操作人的openid和unionid和创建时间,其它字段由传数值来确定
event.addData.OPENID = wxContext.OPENID;
event.addData.UNIONID = wxContext.UNIONID;
var _createTime = db.serverDate();
event.addData.createTime = _createTime;
return db.collection(event.tableName).add({
data: event.addData
});
}
//通用所有记录
case 'alllist':
{//取跳过m条数据后的n条数据
return db.collection(event.tableName).orderBy('createTime', 'desc').skip(event.m).limit(event.n).get();
}
//单个详细
case 'doc':
{
return db.collection(event.tableName).doc(event._id).get();
}
//创建者列表
case 'mylist':
{
var openid = wxContext.OPENID;
return db.collection(event.tableName).where({ OPENID: openid }).orderBy('createTime', 'desc').skip(event.m).limit(event.n).get();
}
//删除单条
case 'remove':
{
return db.collection(event.tableName).doc(event._id).remove();
}
default:
{//保留原示例代码以供参考基础
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
}
}
页面统一加载方法
loaddata: function (m = 0, comac = null) {
var that = this;
wx.showLoading({
title: '数据加载中...',
})
wx.cloud.callFunction({
name: 'schoolHander',
data: {
acType: 'alllist',
tableName: 'Schools',
m: m,
n: 20
}
}).then(res => {
if (m == 0) {//如果跳过记录数为0寻么认为是刷新或首次加载,直接把结果赋值
that.setData({
alllist: res.result.data
})
}
else {//跳过行不为0,应该是追加记录
that.setData({
alllist: that.data.alllist.concat(res.result.data)
})
}
wx.hideLoading();
if (comac) {
comac();//如果执行完成后要附加什么方法就执行
}
}).catch(err => {
wx.hideLoading();
if (comac) {
comac();//如果执行完成后要附加什么方法就执行
}
})
}
调用方法
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.loaddata();//因为所有参数都有默认值所以不传自动按默认值首次加载处理
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
//刷新数据,但完成后应该要停止下拉事件,不然经常会出现页面不自动收上去的情况
this.loaddata(0,() => {
wx.stopPullDownRefresh();
});
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
所跳过数据行的值设置成当前页只已经存在的数据条数
this.loaddata(this.data.alllist.length,null);
}
小小分享,献丑了_
但其实小程序,更适合更加原子化,比如拆分成 getXXX,addXXX,removeXXX
你说得对,如果有很多关联需要处理的需要单独弄出来,不过提供一个全局通用的也可处理一些本身并不复杂的东西,可以用来应急下。