博客
关于我
借助云开发数据库实现小程序列表上拉刷新功能丨云开发101
阅读量:86 次
发布时间:2019-02-26

本文共 2350 字,大约阅读时间需要 7 分钟。

上一期101专栏中,我们介绍了,相对应的,小程序列表上拉刷新又该如何实现呢?本期专栏就来为大家解答。

原理说明

在小程序中,如果我们希望实现上拉刷新的功能,则需要我们监听小程序页面的 onPullDownRefresh 事件,我们可以在这个方法中实现数据的加载和替换,从而实现数据的刷新和页面的更新。

实现代码

正常情况下的上拉刷新

首先,我们先来看一看一般情况下的上拉刷新功能的实现。这里的「一般情况」是指你没有使用 scroll-view 组件的场景,或者使用的是横向的 scroll-view 的场景,列表是直接构建在页面内部的,而不是构建在 scroll-view 内部的。

在这种情况下,我们如果希望在页面上实现上拉刷新,需要在 app.json 中的 window 选项中,或者是页面的配置中加入 enablePullDownRefresh,并将其配置为 true

// app.json{      ...   "window":{          "enablePullDownRefresh":true    }    ...}// page.json{      "enablePullDownRefresh":true}

配置好以后,我们就可以开始配置了。进入到我们需要实现下拉刷新的页面,在这个页面中,我们需要在 Page 的构造函数中添加 onPullDownRefresh 函数的监听。

Page({     onPullDownRefresh:function(){         // 这里我们需要进行页面的加载。    }})

我们需要在 onPullDownRefresh 函数中,加入我们查询数据的代码,从而实现数据的更新和替换,大体上写好的代码如下:

Page({     onPullDownRefresh:function(){         let db = wx.cloud.database();    // 查询数据    db.collection('records').get().then(res => {         // 更新数据      this.setData({                   data: res.data      },()=>{                   wx.stopPullDownRefresh();  // 数据同步完成后,停止掉上拉刷新的动画效果。      })    }).catch(err => {         console.error(err)    })  }})

在上面这段代码中,我们在 onPullDownRefresh 方法中加入了 云开发的数据库查询方法,并在数据库查询方法的成功回调中加入了 setData 的方法来更新数据,从而确保我们的小程序的页面数据可以完成更新。

setData 方法的回调中,我加入了对 wx.stopPullDownRefresh 的调用,这个 API 可以停止掉小程序的 PullDownRefresh 的动效,从而避免掉数据更新完成了,但是页面还处在下拉加载的状态。

这样,我们就足以处理绝大多数场景下的上拉刷新的情况了。

特殊情况下的上拉刷新

除了直接在页面上使用上拉刷新的 API 以外,还会有另外一种场景,就是我们会将页面顶部固定,下方的部分滚动,比如腾讯视频的视频播放页面。这个页面是在上方放置一个 Video Player,下方放置一个 scroll-view 来完成滑动,从而实现顶部的 Video Player 固定的效果。在这种情况下,我们应该如何实现上拉刷新呢?

其实也很简单,我们只需要利用 scroll-view 组件的 bindscrolltoupper 事件来完成上拉刷新的功能。

在具体实现的时候,我们需要在 scroll-view 组件中加入对应的配置。

然后,在对应的页面中,加入具体的事件触发,参考代码如下:

Page({          onTopper:function(){             wx.startPullDownRefresh();          let db = wx.cloud.database();           db.collection('records').get().then(res => {         // 更新数据      this.setData({                   data: res.data      },()=>{                   wx.stopPullDownRefresh(); // 数据同步完成后,停止掉上拉刷新的动画效果。      })    }).catch(err => {         console.error(err)    })  }})

这样,我们就可以实现在 ScrollView 内部实现了一个上拉触底的效果。

在这段代码中,因为我们没有直接触发页面的上拉效果,所以这里我们使用 wx.startPullDownRefresh 来触发页面的上拉效果,然后再使用云开发的 API 来完成数据的加载,加载完成后,调用 wx.stopPullDownRefresh 方法,停掉上拉刷新的动画效果。

这样,即使我们没有直接触发页面的事件,但可以达到类似的页面效果。

总结

上拉刷新是一个我们很常用的功能,在使用时其实非常简单,你只需要在特定的方法中调用相关的函数,来实现数据的重载,就可以实现上拉刷新的功能。

转载地址:http://xequ.baihongyu.com/

你可能感兴趣的文章
mysql中的四大运算符种类汇总20多项,用了三天三夜来整理的,还不赶快收藏
查看>>
mysql中的字段如何选择合适的数据类型呢?
查看>>
MySQL中的字符集陷阱:为何避免使用UTF-8
查看>>
mysql中的数据导入与导出
查看>>
MySQL中的时间函数
查看>>
mysql中的约束
查看>>
MySQL中的表是什么?
查看>>
mysql中穿件函数时候delimiter的用法
查看>>
Mysql中索引的分类、增删改查与存储引擎对应关系
查看>>
Mysql中索引的最左前缀原则图文剖析(全)
查看>>
MySql中给视图添加注释怎么添加_默认不支持_可以这样取巧---MySql工作笔记002
查看>>
Mysql中获取所有表名以及表名带时间字符串使用BetweenAnd筛选区间范围
查看>>
Mysql中视图的使用以及常见运算符的使用示例和优先级
查看>>
Mysql中触发器的使用示例
查看>>
Mysql中设置只允许指定ip能连接访问(可视化工具的方式)
查看>>
mysql中还有窗口函数?这是什么东西?
查看>>
mysql中间件
查看>>
MYSQL中频繁的乱码问题终极解决
查看>>
MySQL为Null会导致5个问题,个个致命!
查看>>
MySQL为什么不建议使用delete删除数据?
查看>>