小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式

onPullDownRefresh()  //用户下拉刷新事件,onReachBottom() //用户上拉触底事件

onPullDownRefresh和onReachBottom是小程序的页面事件,官方文档描述”需要在app.jsonwindow选项中或页面的json文件中开启enablePullDownRefresh“,个人觉得还是在页面配置较好,毕竟不是每个页面都需要上拉刷新事件,

  1. //json配置
  2. {
  3. "usingComponents": {},
  4. "backgroundTextStyle":"dark",//dark:显示刷新动画
  5. "enablePullDownRefresh":true,//允许下拉刷新
     "onReachBottomDistance":50//距离底部多少px时触发上拉加载事件
    }

使用方法

官方文档:”可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致“,

意思是既可以通过用户滑动触发,也可以通过wx.startPullDownRefresh()调用的方式执行onPullDownRefresh()方法,代码如下

  1. onShow() {
  2. setTimeout(()=>{
  3. //方法调用的方式触发下拉刷新事件
  4. wx.startPullDownRefresh()
  5. },1000)
  6. },
  7. /**
  8. * 下滑刷新事件
  9. */
  10. onPullDownRefresh() {
  11. //做些什么...
  12. wx.stopPullDownRefresh()//得到结果后关掉刷新动画
  13.  
  14. },

上拉加载事件需要用户滑动,当距离页面底部的值到onReachBottomDistance的设置参数时,便会触发,代码如下

  1. /**
  2. * 上拉加载
  3. */
  4. onReachBottom(){
  5. //做些什么
  6. ......
  7. },

最后看一个整体的代码

  1. onShow() {
  2. setTimeout(()=>{
  3. wx.startPullDownRefresh()//通过方法调用刷新
  4. },1000)
  5. },
  6. /**
  7. * 下滑刷新事件
  8. */
  9. onPullDownRefresh() {
  10. wx.stopPullDownRefresh()//结束刷新
  11.  
  12. },
  13. /**
  14. * 上拉加载
  15. */
  16. onReachBottom(){
  17. //触发了上拉加载,做些什么
  18. },

微信小程序 上拉刷新/下拉加载的更多相关文章

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

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

  2. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息

    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...

  3. 微信小程序小结(4) -- 分包加载及小程序间跳转

    分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载(主要是空间不够用,哈哈~). 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中 ...

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

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

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

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

  6. 微信小程序云开发-列表下拉刷新

    一.json文件开启页面刷新 开启页面刷新.在页面的json文件里配置两处: "enablePullDownRefresh": true, //true代表开启页面下拉刷新 &qu ...

  7. 微信小程序 禁止ios页面下拉下滑滚动 出现空白的情况

    项目需要做了一个图片拖动指定组件上删除,和排序的功能android测试正常, ios会出现拖动图片页面也跟着下滑的尴尬情况. 查文档下拉刷新配置默认是关闭的,后经查找文档发现在本页面page.json ...

  8. 微信小程序手动实现select下拉框选择

    在小程序中没有像h5中的下拉 标签的 picker又满足部了,那就自己动手写 <view class='list-msg'> <view class='list-msg1'> ...

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

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

  10. 微信小程序:添加全局的正在加载中图标效果

    在发送请求的时候,显示一个正在加载中的小图标.在加载下一页的时候也显示正在加载中.同时数据请求回来了,把加载中进行关闭. 开发----API-----界面 在哪里添加这两段代码会比较方便呢?一个项目有 ...

随机推荐

  1. pg和mysql对比

    作者:方圆链接:https://www.zhihu.com/question/20010554/answer/15863274来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  2. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  3. LeetCode算法题-Shortest Distance to a Character(Java实现)

    这是悦乐书的第321次更新,第343篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第191题(顺位题号是821).给定字符串S和字符C,返回一个整数数组,表示字符串中所有 ...

  4. python 封装dlib模型进行人脸识别系统的登录认证

    1.直接上干货 #!/usr/bin/python # -*- coding: utf-8 -*- import time import dlib import numpy as np class f ...

  5. 所遇Oracle错误代码

    ORA-00905: 缺失关键字   少了空格或关键字写错 ORA-00922: 选项缺失或无效 错误原因:一般是语句的语法有问题.比如命名不对,关键字写错等等.对于非标准的命名,一般采用双引号来创建 ...

  6. JSP页面读取数据中的数据内容,出现乱码现象的解决方法

    1.首先要确保JSP页面的编码已修改为“utf-8”的字符编码: 2.然后再在jsp页面上添加代码进行设置: 先用getBytes()方法读出数据,然后再new String()方法设置格式为“utf ...

  7. swagger @ApiModel添加实体类不生效

    在使用swagger时, 以为加上@ApiModel在实体类上就可以在swagger-ui.html的Models里面显示. 但是我创建了很多实体类, 但怎么也只显示了一个??? Models中无论如 ...

  8. CentOS7中MySQL跨机器数据迁移

    1.概况 在CentOS7环境下,使用命令方式将MySQL数据从源端主机迁移到目标端主机上. 2.迁移全部数据库 1)源端备份: [root@hadoop102 /]# mysqldump -u ro ...

  9. vue+express利用token 完成前后端登录

    token是后端给前端的一个二维码, 这个二维码一般是暗码,  前端拿着这个二维码到后端, 后端便可以通过这个二维码得知用户是否登录过, 用户是谁等信息(具体什么信息,是后端在返回token时候设置的 ...

  10. JetBrains插件

    1,翻译插件 TranslationPlugin 打开翻译对话框 : Ctrl + Shift + O(英文字母o) 鼠标取词并翻译 : Ctrl + Shift + Y http://yiiguxi ...