mySc.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <view class="indexBox padding-c-30 padding-v-30">
  3. <cmy-mys-list :list="navList.orderList"></cmy-mys-list>
  4. <uni-load-more :status="navList.loadingType"></uni-load-more>
  5. </view>
  6. </template>
  7. <script>
  8. import {
  9. BookmarkList
  10. } from '@/api/model.js';
  11. export default {
  12. data() {
  13. return {
  14. // 商品列表
  15. navList: {
  16. state: 1,
  17. loadingType: 'more',
  18. orderList: [],
  19. page: 1, //当前页数
  20. limit: 10, //每次信息条数
  21. count: 0, //总消息条数
  22. },
  23. };
  24. },
  25. onLoad: function(option) {
  26. this.getList();
  27. },
  28. // 滚动到底部
  29. onReachBottom() {
  30. this.getList();
  31. },
  32. methods: {
  33. // 获取模板列表
  34. getList(source) {
  35. //这里是将订单挂载到tab列表下
  36. let navItem = this.navList;
  37. let state = navItem.state;
  38. if (source === 'tabChange' && navItem.loaded === true) {
  39. //tab切换只有第一次需要加载数据
  40. return;
  41. }
  42. if (navItem.loadingType === 'loading') {
  43. //防止重复加载
  44. return;
  45. }
  46. if (navItem.loadingType === 'noMore') {
  47. //防止重复加载
  48. return;
  49. }
  50. // 修改当前对象状态为加载中
  51. navItem.loadingType = 'loading';
  52. BookmarkList({
  53. page: navItem.page,
  54. pageSize: navItem.limit
  55. })
  56. .then(({
  57. data
  58. }) => {
  59. let arr = data.list;
  60. navItem.orderList = navItem.orderList.concat(arr);
  61. navItem.page++;
  62. if (navItem.limit == arr.length) {
  63. //判断是否还有数据, 有改为 more, 没有改为noMore
  64. navItem.loadingType = 'more';
  65. return;
  66. } else {
  67. //判断是否还有数据, 有改为 more, 没有改为noMore
  68. navItem.loadingType = 'noMore';
  69. }
  70. uni.hideLoading();
  71. this.$set(navItem, 'loaded', true);
  72. })
  73. .catch(e => {
  74. console.log(e);
  75. });
  76. }
  77. },
  78. };
  79. </script>
  80. <style lang="scss">
  81. page,
  82. .indexBox {
  83. height: auto;
  84. min-height: 100%;
  85. }
  86. </style>