reachBottom.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. module.exports = Behavior({
  2. data: {
  3. loading: false, // 加载状态标志位
  4. list: [],
  5. nullList: false,
  6. grade: '',
  7. pageNo: 1,
  8. totalSize: 0,
  9. noMoreData: false, // 无更多数据置为 false
  10. mainList: [] //前端分页的大数组
  11. },
  12. methods: {
  13. async getData(fn, args) {
  14. if (this.data.noMoreData) {
  15. return
  16. }
  17. let params = {
  18. pageNo: this.data.pageNo,
  19. pageSize: 10,
  20. ...args
  21. }
  22. // 加载状态,用于页面中控制加载动画的显示
  23. this.setData({
  24. loading: true,
  25. nullList: false
  26. })
  27. let {
  28. list,
  29. totalSize
  30. } = await fn(params).finally(() => {
  31. // 页面渲染完成后关闭加载动画字段
  32. wx.nextTick(() => {
  33. this.setData({
  34. loading: false
  35. })
  36. });
  37. })
  38. list = [...this.data.list, ...list]
  39. if (list.length == 0) {
  40. this.setData({
  41. nullList: true
  42. })
  43. } else {
  44. this.setData({
  45. nullList: false
  46. })
  47. }
  48. this.setData({
  49. pageNo: ++this.data.pageNo,
  50. list,
  51. totalSize,
  52. noMoreData: list.length >= totalSize
  53. })
  54. },
  55. // 前端分页
  56. async localGetData(fn, args) {
  57. let mainList = this.data.mainList
  58. let list = this.data.list
  59. let params = {
  60. pageNo: this.data.pageNo,
  61. pageSize: 100,
  62. ...args
  63. }
  64. if (mainList.length == 0) {
  65. // 加载状态,用于页面中控制加载动画的显示
  66. this.setData({
  67. loading: true,
  68. nullList: false
  69. })
  70. let res = await fn(params).finally(() => {
  71. // 页面渲染完成后关闭加载动画字段
  72. wx.nextTick(() => {
  73. this.setData({
  74. loading: false
  75. })
  76. });
  77. })
  78. mainList = res.list
  79. list = mainList.slice(0, this.data.pageNo * 6)
  80. if (list.length == 0) {
  81. this.setData({
  82. nullList: true
  83. })
  84. } else {
  85. this.setData({
  86. nullList: false
  87. })
  88. }
  89. this.setData({
  90. pageNo: ++this.data.pageNo,
  91. mainList,
  92. list,
  93. })
  94. } else if (mainList.length != 0 && mainList.length > list.length) {
  95. list = this.data.mainList.slice(0, this.data.pageNo * 6)
  96. this.setData({
  97. pageNo: ++this.data.pageNo,
  98. mainList,
  99. list,
  100. })
  101. }
  102. },
  103. resetData(data) {
  104. if (this.data.loading) return; // 如果接口已经在请求中,则不重置数据,防止用户持续下拉刷新
  105. this.setData({
  106. loading: false,
  107. list: [],
  108. mainList: [],
  109. pageNo: 1,
  110. totalSize: 0,
  111. noMoreData: false,
  112. })
  113. this.loadMore(data); // 调用页面中的接口请求方法
  114. },
  115. },
  116. })