MescrollMixin.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <script>
  2. // 引入 MescrollMixin
  3. import MescrollMixin from 'uni-mixins-mescroll'
  4. export default {
  5. mixins: [MescrollMixin],
  6. data() {
  7. return {
  8. // 数据列表
  9. dataList: [],
  10. // 是否正在加载
  11. isLoading: false,
  12. // 是否没有更多数据
  13. noMoreData: false
  14. }
  15. },
  16. methods: {
  17. // 下拉刷新回调
  18. downCallback() {
  19. // 重新加载数据
  20. this.loadData(true)
  21. },
  22. // 上拉加载更多回调
  23. upCallback() {
  24. // 加载更多数据
  25. this.loadData(false)
  26. },
  27. // 加载数据的方法
  28. loadData(isRefresh) {
  29. // 设置为正在加载
  30. this.isLoading = true
  31. // 模拟异步加载数据
  32. setTimeout(() => {
  33. // 假设我们从某个API获取了数据
  34. const newData = [
  35. /* 新数据 */
  36. ]
  37. // 如果是刷新,则替换数据,否则追加数据
  38. if (isRefresh) {
  39. this.dataList = newData
  40. } else {
  41. this.dataList = this.dataList.concat(newData)
  42. }
  43. // 设置是否还有更多数据
  44. this.noMoreData = newData.length < 10 // 假设一次请求不足10条则认为没有更多数据
  45. // 设置为不是正在加载
  46. this.isLoading = false
  47. // 结束上拉加载或下拉刷新
  48. this.mescroll.endSuccess()
  49. }, 1000)
  50. }
  51. }
  52. }
  53. </script>