微信小程序云開發(fā)實(shí)現(xiàn)分頁刷新獲取數(shù)據(jù)

更新時間：2022年08月24日 12:02:26 作者：酷酷咕咕

這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)實(shí)現(xiàn)分頁刷新獲取數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序云開發(fā)分頁刷新獲取數(shù)據(jù)的具體代碼，供大家參考，具體內(nèi)容如下

利用云函數(shù)調(diào)用數(shù)據(jù)庫，在云函數(shù)中分頁調(diào)取數(shù)據(jù)。再在js中不斷將新的數(shù)據(jù)拼接到舊數(shù)據(jù)中，在前端顯示。初始只顯示5條記錄，下拉刷新即可獲取更多。

首先在JS中，調(diào)用云函數(shù)，獲取到后端的數(shù)據(jù)：

/**
?* 從數(shù)據(jù)庫獲取數(shù)據(jù)
?*/
? getData(num=5,page=0){
? ? wx.cloud.callFunction({
? ? ? name:"dairyGetlist", ?//云函數(shù)名
? ? ? data:{
? ? ? ? num:num, ? ?//用來記錄每次獲取數(shù)據(jù)的數(shù)量
? ? ? ? page:page, ?//每次從page條數(shù)據(jù)之后獲取數(shù)據(jù)
? ? ? }
? ? }).then(res=>{
? ??? ? ?//將新數(shù)據(jù)拼接到舊數(shù)據(jù)
? ? ??
? ? ? var oldData=this.data.dairyObj
? ? ? var dr=res.result.data
? ? ? //將時間戳寫成固定格式
? ? ? ? dr.forEach(item=>{
? ? ? ? var d=new Date(item.time)
? ? ? ? var year=d.getFullYear()
? ? ? ? var month=d.getMonth()+1
? ? ? ? var day=d.getDate()
? ? ? ? item.time=year+"/"+month+"/"+day
? ? ? ? //文本內(nèi)容中的換行和空格要進(jìn)行相應(yīng)的轉(zhuǎn)換，才能保證輸出的正確性
? ? ? ? item.content=item.content.split('&hc').join('\n')
? ? ? })
? ? ? var newData=oldData.concat(res.result.data)
? ? ? this.setData({
? ? ? ? dairyObj:newData
? ? ? })
? ? })
? },

然后來到云函數(shù)中，對數(shù)據(jù)庫進(jìn)行操作：

exports.main = async (event, context) => {
//獲取參數(shù)?
? var num=event.num;
? var page=event.page;
? const { OPENID } = cloud.getWXContext()
? return await db.collection("diarylist").where({
? ? _openid:OPENID
? }).orderBy('time','desc').skip(page).limit(num).get({
? ? success:function(res){
? ? ? console.log(res.data)
? ? }
? })
}

數(shù)據(jù)庫返回?cái)?shù)據(jù)后，每次觸底刷新觸發(fā)云函數(shù)的調(diào)用：

/**
?* 頁面上拉觸底事件的處理函數(shù)
?*/
? onReachBottom: function () {
? ? wx.showLoading({
? ? ? title: '正在加載...',
? ? ? mask:true
? ? })
? ? //dairyObj是存放日記的數(shù)組
? ? var page=this.data.dairyObj.length
? ? this.getData(5,page)
? ? this.changeup()
? ? wx.hideLoading()
? },

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: