My_listbox.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <template>
  2. <view class="container" :style="{ background: boxBackground }">
  3. <view id="mylisttop" />
  4. <scroll-view class="scroll-view" scroll-y :refresher-enabled='pullDown' :refresher-triggered='inRefresh'
  5. :style="{ height: (defaultHeight - 0 || height - 0) + 'px' }" :triggered='true'
  6. @refresherrefresh='pullToRefresh' :scroll-into-view="scrollIntoView" :lower-threshold='300'
  7. :scroll-with-animation="true" @scrolltolower='loadThePage'>
  8. <view id="header">
  9. <slot />
  10. </view>
  11. <view v-if="empty">
  12. <view :style="{ height: tovw(occupyHeight) }" />
  13. <u-empty :mode="mode" text="暂无数据" />
  14. </view>
  15. <view id="bottom" />
  16. <view v-if="pagingText" class="paging">
  17. {{ pagingText }}
  18. </view>
  19. <u-divider v-if="bottomTips" text="已经到底部" :dashed="true"></u-divider>
  20. <view v-if="bottomHeight" :style="{ height: tovw(bottomHeight) }" />
  21. </scroll-view>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. name: 'My_listbox',
  27. props: {
  28. getlist: Function,
  29. automatic: {
  30. type: Boolean,
  31. default: true
  32. },
  33. mode: {
  34. type: String,
  35. default: "data"
  36. },
  37. pullDown: {
  38. type: Boolean,
  39. default: true
  40. },
  41. occupyHeight: {
  42. type: Number,
  43. default: 50
  44. },
  45. boxBackground: {
  46. type: String,
  47. default: ""
  48. },
  49. defaultHeight: {
  50. type: [String, Number],
  51. default: 0
  52. },
  53. isShowEmpty: {
  54. type: Boolean,
  55. default: true
  56. },
  57. bottomHeight: {
  58. type: [Number, String],
  59. default: 0
  60. }
  61. },
  62. data() {
  63. return {
  64. inRefresh: false, //下拉开启自定义项
  65. height: 0,
  66. scrollIntoView: "",
  67. pagingText: "",
  68. bottomTips: false,
  69. empty: false
  70. };
  71. },
  72. mounted() {
  73. if (this.automatic) setTimeout(() => {
  74. this.setHeight()
  75. }, 100);
  76. },
  77. methods: {
  78. /* 下拉刷新 */
  79. pullToRefresh() {
  80. this.inRefresh = true
  81. this.$emit("getlist", true)
  82. },
  83. /* 刷新完成 */
  84. RefreshToComplete() {
  85. setTimeout(() => {
  86. this.inRefresh = false
  87. }, 500)
  88. },
  89. /* 加载分页 */
  90. loadThePage() {
  91. this.$emit("getlist", false)
  92. },
  93. /* 设置组件高度 */
  94. setHeight(mode, num) {
  95. return new Promise((resolve) => {
  96. this.getHeight("#mylisttop", this).then(res => {
  97. let height = res;
  98. switch (mode) {
  99. case 'add':
  100. height = (res - 0) + (num - 0);
  101. break;
  102. case 'minus':
  103. height = res - num;
  104. break;
  105. }
  106. if (this.height != height) this.height = height;
  107. resolve(height)
  108. });
  109. })
  110. },
  111. /* 分页 */
  112. paging(content, res) {
  113. content.pageNumber = res.pageNumber + 1;
  114. content.pageTotal = res.pageTotal;
  115. // this.pagingText = content.pageNumber + ' / ' + content.pageTotal;
  116. this.bottomTips = res.total != 0 && content.pageNumber >= content.pageTotal;
  117. if (this.isShowEmpty) this.empty = res.total == 0;
  118. return content;
  119. }
  120. },
  121. }
  122. </script>
  123. <style lang="scss" scoped>
  124. .scroll-view {
  125. position: relative;
  126. .paging {
  127. width: 100vw;
  128. text-align: center;
  129. position: absolute;
  130. bottom: 15px;
  131. }
  132. }
  133. </style>