上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更多。

下拉加载更多:

1、在响应的 xxx.json 配置文件依次配置如下配置

>> enablePullDownRefresh:true  表示开启下拉刷新

>> backgroundTextStyle              下拉 loading 的样式,仅支持 dark/light

>> backgroundColor                    窗口的背景色

2、上方后面2个没有设置好,在下拉时,页面顶部会出现一块白色的区域。

3、在下拉刷新时,不可使用 wx.showLoading 提示(其余的提示我没有测试),否则在 ios 下页面回弹过多,导致看不到顶部的那个提示页面刷新的区域。

4、页面下拉会触发 onPullDownRefresh 事件

5、防止 onPullDownRefresh 多次触发,导致多次请求

上拉加载更多:

1、在对应的 xxx.json 中配置(不是必须的)

>> onReachBottomDistance          页面上拉触底事件触发时距页面底部距离,单位为px

2、页面上拉在小于或等于  onReachBottomDistance  的距离时,会触发 onReachBottom 事件

实现效果:

代码实现:

1、页面布局 loadMore.wxml 文件的编写

  1. <view class='view-container'>
  2. <block wx:for='{{articles}}' wx:key='{{item.id}}'>
  3. <view class='articles-container'>
  4. <view class='info'>
  5. <image class='avatar' src='{{item.avatar}}'></image>{{item.nickname}}
  6. <text class='created-at'>{{item.created_at}}</text>
  7. <text class='category'>{{item.category}}</text>
  8. </view>
  9. </view>
  10. </block>
  11. <view class='data-loading' hidden='{{hidden}}'>
  12. 数据加载中...
  13. </view>
  14. </view>

2、样式编写 loadMore.wxss 文件的编写

  1. .view-container {
  2. background-color: #fff;
  3. }
  4. .data-loading {
  5. height: 100rpx;
  6. line-height: 100rpx;
  7. background-color: #eee;
  8. text-align: center;
  9. font-size: 14px;
  10. }
  11. .articles-container {
  12. border-bottom: 1px solid #eee;
  13. margin: 30rpx 10rpx;
  14. background-color: #eee;
  15. }
  16. .articles-container .info {
  17. font-size: 12px;
  18. margin: 20rpx 0rpx;
  19. height: 100%;
  20. display: inline-block;
  21. }
  22. .articles-container .info .avatar {
  23. width: 60rpx;
  24. height: 60rpx;
  25. margin-right: 10rpx;
  26. border-radius: 60rpx;
  27. display: inline-block;
  28. vertical-align: middle;
  29. }
  30. .articles-container .info .created-at {
  31. margin: 0px 20rpx;
  32. display: inline-block;
  33. vertical-align: middle;
  34. }
  35. .articles-container .info .category {
  36. color: #3399ea;
  37. display: inline-block;
  38. vertical-align: middle;
  39. }

3、js 控制 loadMore.js 文件的编写

  1. Page({
  2. data: {
  3. /**
  4. * 需要访问的url
  5. */
  6. urls: [
  7. 'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=0',
  8. 'https://www.csdn.net/api/articles?type=new&category=arch',
  9. 'https://www.csdn.net/api/articles?type=new&category=ai',
  10. 'https://www.csdn.net/api/articles?type=new&category=newarticles'
  11. ],
  12. /**
  13. * 当前访问的url索引
  14. */
  15. currentUrlIndex: 0,
  16. /**
  17. * 获取到的文章
  18. */
  19. articles: [],
  20. /**
  21. * 控制上拉到底部时是否出现 "数据加载中..."
  22. */
  23. hidden: true,
  24. /**
  25. * 数据是否正在加载中,避免数据多次加载
  26. */
  27. loadingData: false
  28. },
  29. onLoad: function(options) {
  30. this.loadData(false);
  31. },
  32. /**
  33. * 加载数据
  34. */
  35. loadData: function(tail, callback) {
  36. var that = this,
  37. urlIndex = that.data.currentUrlIndex;
  38. wx.request({
  39. url: that.data.urls[urlIndex],
  40. success: function(r) {
  41. var oldArticles = that.data.articles,
  42. newArticles = tail ? oldArticles.concat(r.data.articles) : r.data.articles;
  43. that.setData({
  44. articles: newArticles,
  45. currentUrlIndex: (urlIndex + 1) >= that.data.urls.length ? 0 : urlIndex + 1
  46. });
  47. if (callback) {
  48. callback();
  49. }
  50. },
  51. error: function(r) {
  52. console.info('error', r);
  53. },
  54. complete: function() {}
  55. });
  56. },
  57. /**
  58. * 监听用户下拉动作
  59. */
  60. onPullDownRefresh: function() {
  61. console.info('onPullDownRefresh');
  62. var loadingData = this.data.loadingData,
  63. that = this;
  64. if (loadingData) {
  65. return;
  66. }
  67. // 显示导航条加载动画
  68. wx.showNavigationBarLoading();
  69. // 显示 loading 提示框,在 ios 系统下,会导致顶部的加载的三个点看不见
  70. // wx.showLoading({
  71. // title: '数据加载中...',
  72. // });
  73. setTimeout(function() {
  74. that.loadData(false, () => {
  75. that.setData({
  76. loadingData: false
  77. });
  78. wx.stopPullDownRefresh();
  79. // wx.hideLoading();
  80. wx.hideNavigationBarLoading();
  81. console.info('下拉数据加载完成.');
  82. });
  83. }, 1000);
  84. },
  85. /**
  86. * 页面上拉触底事件的处理函数
  87. */
  88. onReachBottom: function() {
  89. console.info('onReachBottom');
  90. var hidden = this.data.hidden,
  91. loadingData = this.data.loadingData,
  92. that = this;
  93. if (hidden) {
  94. this.setData({
  95. hidden: false
  96. });
  97. console.info(this.data.hidden);
  98. }
  99. if (loadingData) {
  100. return;
  101. }
  102. this.setData({
  103. loadingData: true
  104. });
  105. // 加载数据,模拟耗时操作
  106. wx.showLoading({
  107. title: '数据加载中...',
  108. });
  109. setTimeout(function() {
  110. that.loadData(true, () => {
  111. that.setData({
  112. hidden: true,
  113. loadingData: false
  114. });
  115. wx.hideLoading();
  116. });
  117. console.info('上拉数据加载完成.');
  118. }, 1000);
  119. }
  120. })

4、配置文件 loadMore.json 的编写

  1. {
  2. "navigationBarTitleText": "上拉刷新和下拉加载更多",
  3. "enablePullDownRefresh": true,
  4. "onReachBottomDistance": 0,
  5. "backgroundTextStyle": "dark",
  6. "backgroundColor": "#c0d9ff"
  7. }

完整代码:

微信小程序实现上拉和下拉加载更多代码:https://gitee.com/huan1993/weixin_mini_program_study/tree/master/pages/view-pull-up-load-more

微信小程序实现上拉和下拉加载更多的更多相关文章

  1. 微信小程序中如何实现分页下拉加载?(附源码)

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  2. 微信小程序 在使用wx.request时显示加载中

    微信小程序中,向后台请求数据是,通常想给用户提示正在加载中,如下图: 我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.re ...

  3. 微信小程序开发--模板(template)使用,数据加载,点击交互

    微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用.结果在数据渲染那懵逼了.按照官网上对模板的说明和对数据的加载. 1.定义模板 使用name属性,作为模 ...

  4. 在微信小程序中,如何实现下拉刷新(模拟刷新)

    一.在app.json中启动刷新, 在Windows 中, 添加  "enablePullDownRefresh":"true" 二.在需要刷新的页面中写(若是 ...

  5. 【微信小程序】scroll-view与Page下拉冲突

    需求:主界面是个列表.列表可以纵向滑动,下拉添加新的条目Item.每个条目Item可以横向滑动. 发现做下拉时,用Page的enablePullDownRefresh和scroll-view条目的横向 ...

  6. 微信小程序开发——设置默认图片、错误加载图片

    小程序不支持h5中的onerrorimg,只开放了binderror属性,当错误发生时,会发布到 AppService,事件对象event.detail = {errMsg: 'something w ...

  7. 微信小程序(五) 利用模板动态加载数据

    利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:

  8. 微信小程序:picker组件实现下拉框效果

    一.wxml中代码 <view class="in_order_Param">             <text>状态:</text>     ...

  9. 微信小程序 和 laravel8 实现搜索后分页 加载

    Page({ /** * 页面的初始数据 */ data: { activity:{}, page:1, last_page : 0, keyword:'' }, //加载 scroll(e){ le ...

随机推荐

  1. vivo营销自动化技术解密|开篇

    一.营销自动化概览 1.1. 什么是营销自动化 营销自动化是指专门为营销部门或组织设计的软件平台和技术,可以更有效地在线进行多渠道营销并使重复性任务自动化.营销部门和销售人员通过制定任务和流程的操作标 ...

  2. 原子操作cas

    一.概念, 基于处理器指令,把比较和交换合成一个指令完成,保证了原子性: 因为是针对一个内存地址值的,一个内存地址指向一个变量,所以只对一个共享变量能保证原子性: 二.原子操作类 锁只有synchro ...

  3. SpringMVC基于注解开发

    一. 1.配置 适配器的作用就是规定怎么调控制器: 2.使用 controller代码 三.

  4. AOP快速入门

    一.概念 AOP面向切面编程,是函数式编程的延申,是对OOP的补充: 代理模式:拦截增强作用,增强功能: 1.java继承,纵向共性抽取, 2.横向切面AOP织入增强代码方式 二.原理是通过代理机制, ...

  5. python库--tensorflow--可视化

    方法 返回值类型 参数 说明 tf.summary .FileWrite()   创建事件文件     logdir 文件保存路径(C盘), 通过tensorboard --logdir=文件路径(l ...

  6. 迷宫3---BFS

    经过思考蒜头君终于解决了怎么计算一个迷宫的最短路问题,于是蒜头君找到一个新的迷宫图,来验证自己是否真的会计算一个迷宫的最短路. 为了检验自己计算的是否正确,蒜头君特邀你一起来计算. 输入格式 第一行输 ...

  7. EditPlus配置C/C++运行环境

    1.安装MinGW和EditPlus 2.打开EditPlus ctrl+1 编译 ctrl+2 运行

  8. springboot整合jsp报错

    今天在学springboot整合jsp时遇到了一个问题,虽然jsp不被spring官方推荐使用,但抱着学习的心态还是想解决一下这个问题.在写好了需要pom文件之后,访问网站得到了500的错误提示,后台 ...

  9. 用java代码遍历excel文件并回显

    今天需要完成282个指标,分析后发现好多都是可复用的字段和方法,生成的dao类也是很多重复的代码,所以写下了简单的自动化遍历excel的test方法, excel业务逻辑如下,用了 HSSFSheet ...

  10. FreeRTOS-06-信号量

    说明 本文仅作为学习FreeRTOS的记录文档,作为初学者肯定很多理解不对甚至错误的地方,望网友指正. FreeRTOS是一个RTOS(实时操作系统)系统,支持抢占式.合作式和时间片调度.适用于微处理 ...