返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序云开发实现分页刷新获取数据
  • 840
分享到

微信小程序云开发实现分页刷新获取数据

2024-04-02 19:04:59 840人浏览 八月长安
摘要

本文实例为大家分享了微信小程序云开发分页刷新获取数据的具体代码,供大家参考,具体内容如下 利用云函数调用数据库,在云函数中分页调取数据。再在js中不断将新的数据拼接到旧数据中,在前端

本文实例为大家分享了微信小程序开发分页刷新获取数据的具体代码,供大家参考,具体内容如下

利用云函数调用数据库,在云函数中分页调取数据。再在js中不断将新的数据拼接到旧数据中,在前端显示。初始只显示5条记录,下拉刷新即可获取更多。

首先在JS中,调用云函数,获取到后端的数据:


  getData(num=5,page=0){
    wx.cloud.callFunction({
      name:"dairyGetlist",  //云函数名
      data:{
        num:num,    //用来记录每次获取数据的数量
        page:page,  //每次从page条数据之后获取数据
      }
    }).then(res=>{
         //将新数据拼接到旧数据
      
      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
        //文本内容中的换行和空格要进行相应的转换,才能保证输出的正确性
        item.content=item.content.split('&hc').join('\n')
      })
      var newData=oldData.concat(res.result.data)
      this.setData({
        dairyObj:newData
      })
    })
  },

然后来到云函数中,对数据库进行操作:

exports.main = async (event, context) => {
//获取参数 
  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)
    }
  })
}

数据库返回数据后,每次触底刷新触发云函数的调用:


  onReachBottom: function () {
    wx.showLoading({
      title: '正在加载...',
      mask:true
    })
    //dairyObj是存放日记的数组
    var page=this.data.dairyObj.length
    this.getData(5,page)
    this.changeup()
    wx.hideLoading()
  },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: 微信小程序云开发实现分页刷新获取数据

本文链接: https://lsjlt.com/news/165894.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 微信小程序云开发实现分页刷新获取数据
    本文实例为大家分享了微信小程序云开发分页刷新获取数据的具体代码,供大家参考,具体内容如下 利用云函数调用数据库,在云函数中分页调取数据。再在js中不断将新的数据拼接到旧数据中,在前端...
    99+
    2024-04-02
  • 微信小程序如何实现局部刷新触发整页刷新效果
    小编给大家分享一下微信小程序如何实现局部刷新触发整页刷新效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!效果图如上图所示,头部...
    99+
    2024-04-02
  • 微信小程序页面如何获取数据
    微信小程序页面获取数据的案例:获取page数据,代码:var text=this.data.name ,这样就获取到初始化的值。page({data:{name:"test"},showData:function(){v...
    99+
    2024-04-02
  • 微信小程序页面怎么实时刷新
    微信小程序页面实时刷新的案例:在wxml文件中插入view标签并绑定变量。<view class="num"><view>{{num}}</view></view>...
    99+
    2024-04-02
  • PHP开发微信小程序:如何实现数据分析?
    PHP开发微信小程序:如何实现数据分析?随着微信小程序的普及和应用范围的扩大,对于数据分析的需求也越来越大。在开发微信小程序的过程中,数据分析是非常重要的一环。通过数据分析,我们可以了解用户的行为习惯、用户群体特征,从而进行针对性的优化和改...
    99+
    2023-10-26
    数据分析 PHP 微信小程序
  • 微信小程序开发之获取用户信息
    环境 微信开发者工具 Stable 1.06.2303220云开发控制台 v1.5.47 用户的openid和头像名称信息 openid 是小程序用户的唯一标识。注意, openid 并不是微信用户的...
    99+
    2023-09-27
    微信小程序
  • 微信小程序如何实现下拉刷新和上拉分页效果
    这篇文章主要介绍“微信小程序如何实现下拉刷新和上拉分页效果”,在日常操作中,相信很多人在微信小程序如何实现下拉刷新和上拉分页效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序如何实现下拉刷新和上拉分...
    99+
    2023-06-30
  • 微信小程序实现下拉刷新效果
    微信小程序实现下拉刷新效果微信小程序作为一种轻量级的移动应用开发平台,近年来在移动应用行业得到了广泛的应用和发展。下拉刷新是常见的交互效果,可以在列表页面中,当用户下拉页面时自动刷新内容,提升用户体验和数据的及时更新。本文将介绍如何在微信小...
    99+
    2023-11-21
    微信小程序 实现 下拉刷新
  • 微信小程序开发怎么获取用户信息
    这篇文章主要介绍了微信小程序开发怎么获取用户信息的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序开发怎么获取用户信息文章都会有所收获,下面我们一起来看看吧。第一中直接授权获取(在同一页面之中):首先在微...
    99+
    2023-06-29
  • 微信小程序如何获取data数据
    微信小程序获取data数据的方法:1、在微信开发者工具中打开项目。2、在JS文件中添加获取data数据的函数方法。微信小程序获取data数据的方法:首先用微信开发者工具打开项目。在JS文件添加获取data数据的函数方法,具体代码如下所示:p...
    99+
    2024-04-02
  • uniapp开发小程序,实现获取【微信授权登录】功能
    APP微信授权登录需要到微信开放平台申请,在HBuilderX配置APP SDK中微信登录的appId,另外需要跟小程序、公众号授权账号互通的话也需要在微信开放平台申请 1、在微信公众平台申请应用,获取相应的appid和appsecret ...
    99+
    2023-09-28
    uni-app 小程序 微信
  • 微信小程序中如何实现返回tabBar不刷新页面
    这篇文章主要介绍微信小程序中如何实现返回tabBar不刷新页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、在一个项目中,遇到了这个场景:返回tabBar中的某个页面是需要保存数...
    99+
    2024-04-02
  • 微信小程序实现分页功能
    本文实例为大家分享了微信小程序实现分页的具体代码,供大家参考,具体内容如下 今天被提了个需求,需要小程序上实现分页,搜索能力不行,没找到demo,自己想了一下逻辑然后,就自己写了,不...
    99+
    2024-04-02
  • 微信小程序开发中如何获取用户信息
    这篇文章主要为大家展示了微信小程序开发中如何获取用户信息,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“微信小程序开发中如何获取用户信息”这篇文章吧。wx.getUserInfo(OBJECT)获取...
    99+
    2023-06-26
  • 微信小程序开发实例分析
    这篇文章主要介绍“微信小程序开发实例分析”,在日常操作中,相信很多人在微信小程序开发实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序开发实例分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
    99+
    2023-06-26
  • 微信小程序云开发数据库的示例分析
    小编给大家分享一下微信小程序云开发数据库的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!开发者可以使用云开发开发微信小程...
    99+
    2024-04-02
  • 【微信授权登录】uniapp开发小程序,实现获取微信授权登录功能
    一、解题思路: 微信授权登录(获取用户信息) 1.先获取用户信息——用户授权允许后,通过调用uni.login 可以获取到code。 2.拿着获取到的code去调用——登录接口,可以获取到token。 3.把token存入缓存。就可以在页面...
    99+
    2023-08-16
    小程序 微信 javascript
  • 微信小程序如何实现下拉刷新界面
    这篇文章主要介绍微信小程序如何实现下拉刷新界面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!微信小程序下拉刷新界面的实现利用onPullDownRefresh函数设置下拉刷新功能一、...
    99+
    2024-04-02
  • 实现微信小程序中的下拉刷新功能
    在微信小程序中,可以通过在 scroll-view 组件上添加 enablePullDownRefresh 属性来启用下拉刷新功能。同时需要在页面的 .json 文件中设置 background...
    99+
    2023-09-04
    微信小程序 javascript 小程序 前端 vue.js
  • 微信小程序开发使用onreachBottom实现页面触底加载及分页
    目录 一 简要介绍一下onreachBottom事件  二  实例展示  三 遇到的一些问题 一 简要介绍一下onreachBottom事件         onreachBottom和onLoad以及onShow一样,都属于小程序的生...
    99+
    2023-10-09
    微信小程序 前端 小程序
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作