微信小程序云開發(fā)實(shí)現(xiàn)分頁(yè)刷新獲取數(shù)據(jù)
本文實(shí)例為大家分享了微信小程序云開發(fā)分頁(yè)刷新獲取數(shù)據(jù)的具體代碼,供大家參考,具體內(nèi)容如下
利用云函數(shù)調(diào)用數(shù)據(jù)庫(kù),在云函數(shù)中分頁(yè)調(diào)取數(shù)據(jù)。再在js中不斷將新的數(shù)據(jù)拼接到舊數(shù)據(jù)中,在前端顯示。初始只顯示5條記錄,下拉刷新即可獲取更多。


首先在JS中,調(diào)用云函數(shù),獲取到后端的數(shù)據(jù):
/**
?* 從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)
?*/
? getData(num=5,page=0){
? ? wx.cloud.callFunction({
? ? ? name:"dairyGetlist", ?//云函數(shù)名
? ? ? data:{
? ? ? ? num:num, ? ?//用來(lái)記錄每次獲取數(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
? ? ? //將時(shí)間戳寫成固定格式
? ? ? ? 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
? ? ? })
? ? })
? },然后來(lái)到云函數(shù)中,對(duì)數(shù)據(jù)庫(kù)進(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ù)庫(kù)返回?cái)?shù)據(jù)后,每次觸底刷新觸發(fā)云函數(shù)的調(diào)用:
/**
?* 頁(yè)面上拉觸底事件的處理函數(shù)
?*/
? onReachBottom: function () {
? ? wx.showLoading({
? ? ? title: '正在加載...',
? ? ? mask:true
? ? })
? ? //dairyObj是存放日記的數(shù)組
? ? var page=this.data.dairyObj.length
? ? this.getData(5,page)
? ? this.changeup()
? ? wx.hideLoading()
? },以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序wx.previewImage預(yù)覽圖片實(shí)例詳解
下面通過(guò)實(shí)例代碼給大家講解了微信小程序wx.previewImage預(yù)覽圖片功能,需要的朋友可以參考下2017-12-12
JavaScript數(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)局部刷新分頁(yè)實(shí)例代碼
這篇文章主要介紹了基于BootStrap實(shí)現(xiàn)局部刷新的分頁(yè)的相關(guān)資料,非常不錯(cuò),代碼簡(jiǎn)單易懂,具有參考價(jià)值,需要的朋友可以參考下2016-08-08
javascript中的__defineGetter__和__defineSetter__介紹
這篇文章主要介紹了javascript中的__defineGetter__和__defineSetter__介紹,類似面向?qū)ο笳Z(yǔ)言中的get和set關(guān)鍵字,需要的朋友可以參考下2014-08-08
Clipboard.js 無(wú)需Flash的JavaScript復(fù)制粘貼庫(kù)
這篇文章主要介紹了JavaScript 內(nèi)容復(fù)制(無(wú)需flash) Clipboard.js使用方法,需要的朋友可以參考下2015-10-10
layui-select動(dòng)態(tài)選中值的例子
今天小編就為大家分享一篇layui-select動(dòng)態(tài)選中值的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09

