一、json文件开启页面刷新

开启页面刷新。在页面的json文件里配置两处:

  • "enablePullDownRefresh": true,   //true代表开启页面下拉刷新
  • "backgroundColor": "#d3d3d3"    //背景色设置为灰色,可以看到下拉刷新的效果
  1. {
  2. "usingComponents": {},
  3. "navigationBarTitleText": "列表下拉刷新",
  4. "enablePullDownRefresh": true,
  5. "backgroundColor": "#d3d3d3"
  6. }

二、在页面里监听用户下拉刷新的动作

在page({ })里面的onPullDownRefresh()方法来监听用户刷新

  1. //监听用户下拉动作
  2. onPullDownRefresh(){
  3. console.log("下拉刷新的监听");
  4. }

三、监听到用户刷新的时候重新请求最新数据

  • wx.startPullDownRefresh() //页面加载的时候,开始页面刷新动画
  • wx.stopPullDownRefresh() //数据请求成功后,停止页面刷新动画
  1. Page({
  2. //获取列表信息
  3. getList(){
  4. wx.cloud.database().collection("goods")
  5. .get()
  6. .then(res=>{
  7. console.log("请求成功",res);
  8. wx.stopPullDownRefresh() //数据请求成功后,停止页面刷新动画
  9. this.setData({
  10. list:res.data
  11. })
  12. })
  13. .catch(err=>{
  14. console.log("请求失败",err);
  15. })
  16. },
  17. //页面加载的时候,调用getList获取列表信息
  18. onLoad: function (options) {
  19. wx.startPullDownRefresh() //页面加载的时候,开始页面刷新动画
  20. this.getList()
  21. },
  22.  
  23. //监听用户下拉动作
  24. onPullDownRefresh(){
  25. console.log("下拉刷新的监听");
  26. //下拉刷新的时候,调用getList获取列表信息
  27. this.getList()
  28. }
  29.  
  30. })

四、效果

微信小程序云开发-列表下拉刷新的更多相关文章

  1. 微信小程序scroll-view不能实现下拉刷新

    一般在列表展示页面,会使用到上拉加载和下拉刷新功能,在scroll-view中有bindscrolltolower事件,可以实现上拉加载功能,但是却没法实现下拉刷新. 如需同时使用两种功能,解决步骤如 ...

  2. 微信小程序(2)--下拉刷新和上拉加载更多

    下拉刷新 1.首先在.json文件中配置(如果在app.json文件中配置,那么整个程序都可以下拉刷新.如果写在具体页面的.json文件中,那么就是对应的页面下拉刷新.) 具体页面的.json文件: ...

  3. 微信小程序云开发-列表数据分页加载显示

    一.准备工作 1.创建数据库nums,向数据库中导入108条数据 2.修改数据库表nums的权限 二.新建页面ListPaginated 1.wxml文件 <!-- 显示列表数据 --> ...

  4. 技本功丨收藏!斜杠青年与你共探微信小程序云开发(下篇)

    2019年2月26日,人们为了一个杯子疯了一天. 星巴克猫爪杯,一场已经与猫无关了的“圣杯战争“.网上的倒卖价格,已炒至近千元! 求而不得,舍而不能,得而不惜.这是人最大的悲哀... 所以,请珍惜以下 ...

  5. 第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现

    第一章 “我要点爆”微信小程序云开发之项目建立与我的页面功能实现 开发环境搭建 使用自己的AppID新建小程序项目,后端服务选择小程序·云开发,点击新建,完成项目新建. 新建成功后跳转到开发者工具界面 ...

  6. 微信小程序云开发-从0打造云音乐全栈小程序

    第1章 首门小程序“云开发”课程,你值得学习本章主要介绍什么是小程序云开发以及学习云开发的重要性,并介绍项目的整体架构,真机演示项目功能,详细介绍整体课程安排.课程适用人群以及需要掌握的前置知识.通过 ...

  7. 微信小程序之自定义select下拉选项框组件

    知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...

  8. 第六章 “我要点爆”微信小程序云开发实例之爆文详情页制作

    爆文详情页制作 从首页中数据列表打开相应详情页面的方法: 给数据列表中每个数据项加一个点击事件,同时将当前数据项的id暂时记录在本地,然后跳转到详情页面detail goopen: function ...

  9. “我要点爆”微信小程序云开发实例

    使用云开发进行微信小程序“我要点爆”的制作 下一章:“我要点爆”微信小程序云开发之项目建立与我的页面功能实现 接下来我将对“我要点爆”微信小程序进行完整的开源介绍 小程序名称: 我要点爆 查看方式:从 ...

随机推荐

  1. 低层级GPU虚拟内存管理引论

    低层级GPU虚拟内存管理引论 Introducing Low-Level GPU Virtual Memory Management CUDA应用程序越来越需要尽可能快速高效地管理内存.在CUDA 1 ...

  2. HAL库|神器cubemx的正确打开方式

    前言 工欲善其事,必先利其器.HAL库的开发不一定必须使用cubemx,但是使用了cubemx,你绝对不会后悔.基于一些小伙伴对cubemx的使用还有一些疑问,本次小飞哥从新建工程到生成工程,编写应用 ...

  3. Seata分布式事务框架Sample

    前言 阿里官方给出了seata-sample地址,官方自己也对Sample提供了很多类型,可以查看学习. 我这里选择演示SpringBoot+MyBatis. 该聚合工程共包括5个module: sb ...

  4. 运用iGuard防御ADS权限维持

    权限维持是一门庞大的学问,当攻击者在入侵服务器获得主机权限后,往往会想尽办法隐藏其入侵途径以维持权限.权限维持的一般手段包括构造文件包含漏洞.构造远程任意代码执行漏洞.构造SQL注入点.利用系统自启动 ...

  5. vue中dom节点转图片

    今天项目中有个需求,需要将页面的一部分转为图片,相当于存证之类的 然后我查阅了下百度,发现了几种可行的方法,特此来记录下 1.html2canvas插件 安装:npm install --save h ...

  6. Docker笔记--操作容器命令

    Docker笔记--操作容器命令 创建容器 docker [container] create-- 创建容器,使用docker [container] create命令新建的容器处于停止状态,可以使用 ...

  7. 14.5、redis-sentinel高可用

    1.redis主从同步配置: (0)主机配置: 服务器名称 ip地址 实例6379 实例6380 实例6381 controller-node1 172.16.1.90 主 从 从 (1)确定主从: ...

  8. 2、mysql编译安装

    2.1前言: 此文档介绍的是cmake编译安装的方式: 二进制的安装方式在linux运维_集群_01中有详细的安装说明(已经编译完成,进行初始操作即可) 初始化操作时需要对编译好的mysql进行一下备 ...

  9. 多个异步ajax请求指定顺序执行

    1.比如2个ajax请求,把第二个ajax请求放在第一个ajax请求success方法里面. 2.ajax请求时添加 async: false,//使用同步的方式,true为异步方式.结果是只有等服务 ...

  10. layui--入门(helloWorld)

    具体可参考官方文档:https://www.layui.com/doc/ 由于引入layui 需要用到node.js 安装过程可参考: https://www.cnblogs.com/liuchenx ...