My_listbox.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <view class="container">
  3. <view id="mylisttop" />
  4. <scroll-view class="scroll-view" scroll-y :refresher-enabled='pullDown' :refresher-triggered='inRefresh'
  5. :style="{ height: height + 'px' }" :triggered='true' @refresherrefresh='pullToRefresh' :lower-threshold='300'
  6. @scrolltolower='loadThePage'>
  7. <slot />
  8. <u-empty v-if="empty" :mode="mode" />
  9. </scroll-view>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. name: 'My_listbox',
  15. props: {
  16. getlist: Function,
  17. empty: Boolean,
  18. mode: {
  19. type: String,
  20. default: "data"
  21. },
  22. pullDown: {
  23. type: Boolean,
  24. default: true
  25. }
  26. },
  27. data() {
  28. return {
  29. inRefresh: false, //下拉开启自定义项
  30. height: 0
  31. };
  32. },
  33. methods: {
  34. /* 下拉刷新 */
  35. pullToRefresh() {
  36. this.inRefresh = true
  37. this.$emit("getlist", true)
  38. },
  39. /* 刷新完成 */
  40. RefreshToComplete() {
  41. setTimeout(() => {
  42. this.inRefresh = false
  43. }, 500)
  44. },
  45. /* 加载分页 */
  46. loadThePage() {
  47. this.$emit("getlist", false)
  48. },
  49. /* 设置组件高度 */
  50. setHeight() {
  51. this.getHeight("#mylisttop", this).then(height => {
  52. if (this.height != height) this.height = height
  53. });
  54. }
  55. },
  56. }
  57. </script>
  58. <style lang="scss" scoped>
  59. .scroll-view {
  60. position: relative;
  61. }
  62. /* 适配苹果手机底部安全距离 */
  63. .safety {
  64. height: constant(safe-area-inset-bottom);
  65. height: env(safe-area-inset-bottom);
  66. }
  67. /deep/ .u-empty .u-icon .u-icon__icon {
  68. font-size: 90px !important;
  69. line-height: 90px !important;
  70. }
  71. /deep/ .u-empty__text {
  72. font-size: 14px !important;
  73. }
  74. </style>