微信小程序云開發(fā)實(shí)現(xiàn)分頁刷新獲取數(shù)據(jù)
本文實(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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序wx.previewImage預(yù)覽圖片實(shí)例詳解
下面通過實(shí)例代碼給大家講解了微信小程序wx.previewImage預(yù)覽圖片功能,需要的朋友可以參考下2017-12-12JavaScript數(shù)據(jù)結(jié)構(gòu)之棧實(shí)例用法
在本篇文章里小編給大家分享了關(guān)于JavaScript數(shù)據(jù)結(jié)構(gòu)之棧實(shí)例用法內(nèi)容,有興趣的朋友們學(xué)習(xí)下。2019-01-01基于BootStrap實(shí)現(xiàn)局部刷新分頁實(shí)例代碼
這篇文章主要介紹了基于BootStrap實(shí)現(xiàn)局部刷新的分頁的相關(guān)資料,非常不錯,代碼簡單易懂,具有參考價值,需要的朋友可以參考下2016-08-08javascript中的__defineGetter__和__defineSetter__介紹
這篇文章主要介紹了javascript中的__defineGetter__和__defineSetter__介紹,類似面向?qū)ο笳Z言中的get和set關(guān)鍵字,需要的朋友可以參考下2014-08-08Clipboard.js 無需Flash的JavaScript復(fù)制粘貼庫
這篇文章主要介紹了JavaScript 內(nèi)容復(fù)制(無需flash) Clipboard.js使用方法,需要的朋友可以參考下2015-10-10