其实这两个功能没有多复杂,很多初学者以为是很高大上的功能,不知道怎么做。说白了就是把分页改成ajax形式的了。本人也属新手,欢迎大家在评论区一起留言讨论:bowtie:

配置

下拉刷新配置

根据项目需求选择是进行全局配置还是单页面配置。全局配置在app.jsonwindow中,页面配置在对应pages.json中。

  1. {
  2. "enablePullDownRefresh": true, // 是否开启下拉刷新
  3. "backgroundTextStyle":"dark" // 下拉 loading 的样式,仅支持dark/light
  4. }
  5. // 自定义下拉刷新样式可以使用 scroll-view 进行布局。

关闭下拉刷新动画方法

  1. wx.stopPullDownRefresh()

上拉加载配置

上拉加载只用配置触底距离就可以了,当然不配置也可以,默认就是到最低部触发。

  1. "onReachBottomDistance": 150 // 页面触底距离 单位为px

事件

mpvue中兼容了小程序的生命周期,可直接使用。

下拉刷新事件

  1. onPullDownRefresh () {
  2. console.log('下拉刷新')
  3. }

上拉触底事件

  1. onReachBottom () {
  2. console.log('触底了')
  3. }

代码举例

话不多说,直接上代码,相信有点前端基础的都能看得懂。

  1. <script>
  2. export default {
  3. data () {
  4. return {
  5. app_list: {}, // 列表数据
  6. page: 1, // 当前页数
  7. total_page: 0 // 总页数
  8. }
  9. },
  10. // 实例创建完成后调用数据
  11. created () {
  12. this.getList()
  13. },
  14. // 上拉触底事件
  15. onReachBottom () {
  16. if (this.page > this.total_page) {
  17. console.log('数据加载完了')
  18. } else {
  19. // 下一页
  20. this.page = this.page + 1
  21. this.getList()
  22. }
  23. },
  24. // 下拉刷新事件
  25. onPullDownRefresh () {
  26. // 初始化页码
  27. this.page = 1
  28. this.getList()
  29. },
  30. methods: {
  31. // 获取数据方法
  32. getList () {
  33. const that = this
  34. wx.request({
  35. method: 'post',
  36. url: 'https://www.xxx.com/list',
  37. data: {
  38. page: that.page // 传递页码
  39. },
  40. header: {
  41. 'content-type': 'application/json'
  42. },
  43. success (res) {
  44. // 关闭下拉刷新动画
  45. wx.stopPullDownRefresh()
  46. // 返回的数据
  47. const data = res.data
  48. // 数据追加 data.list为返回的数据列表
  49. if (that.page > 1) {
  50. // 数据追加
  51. that.app_list.push(...data.list)
  52. // ...data.list
  53. // 等同于
  54. // for (var i = 0; i < data.list.length; i++) {
  55. // this.art_list.push(data['list'][i])
  56. // }
  57. } else {
  58. // 数据
  59. that.app_list = data.list
  60. }
  61. // 总页数
  62. that.total_page = data.total_page
  63. }
  64. })
  65. }
  66. }
  67. }
  68. </script>
小程序demo体验

代码汇小程序demo体验