uni-list.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <!-- #ifndef APP-NVUE -->
  3. <view class="uni-list uni-border-top-bottom">
  4. <view v-if="border" class="uni-list--border-top"></view>
  5. <slot />
  6. <view v-if="border" class="uni-list--border-bottom"></view>
  7. </view>
  8. <!-- #endif -->
  9. <!-- #ifdef APP-NVUE -->
  10. <list :bounce="false" :scrollable="true" show-scrollbar :render-reverse="renderReverse" @scroll="scroll" class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop"
  11. loadmoreoffset="15">
  12. <slot />
  13. </list>
  14. <!-- #endif -->
  15. </template>
  16. <script>
  17. /**
  18. * List 列表
  19. * @description 列表组件
  20. * @tutorial https://ext.dcloud.net.cn/plugin?id=24
  21. * @property {String} border = [true|false] 标题
  22. */
  23. export default {
  24. name: 'uniList',
  25. 'mp-weixin': {
  26. options: {
  27. multipleSlots: false
  28. }
  29. },
  30. props: {
  31. stackFromEnd:{
  32. type: Boolean,
  33. default:false
  34. },
  35. enableBackToTop: {
  36. type: [Boolean, String],
  37. default: false
  38. },
  39. scrollY: {
  40. type: [Boolean, String],
  41. default: false
  42. },
  43. border: {
  44. type: Boolean,
  45. default: true
  46. },
  47. renderReverse:{
  48. type: Boolean,
  49. default: false
  50. }
  51. },
  52. // provide() {
  53. // return {
  54. // list: this
  55. // };
  56. // },
  57. created() {
  58. this.firstChildAppend = false;
  59. },
  60. methods: {
  61. loadMore(e) {
  62. this.$emit('scrolltolower');
  63. },
  64. scroll(e) {
  65. this.$emit('scroll', e);
  66. }
  67. }
  68. };
  69. </script>
  70. <style lang="scss">
  71. $uni-bg-color:#ffffff;
  72. $uni-border-color:#e5e5e5;
  73. .uni-list {
  74. /* #ifndef APP-NVUE */
  75. display: flex;
  76. /* #endif */
  77. background-color: $uni-bg-color;
  78. position: relative;
  79. flex-direction: column;
  80. }
  81. .uni-list--border {
  82. position: relative;
  83. /* #ifdef APP-NVUE */
  84. border-top-color: $uni-border-color;
  85. border-top-style: solid;
  86. border-top-width: 0.5px;
  87. border-bottom-color: $uni-border-color;
  88. border-bottom-style: solid;
  89. border-bottom-width: 0.5px;
  90. /* #endif */
  91. z-index: -1;
  92. }
  93. /* #ifndef APP-NVUE */
  94. .uni-list--border-top {
  95. position: absolute;
  96. top: 0;
  97. right: 0;
  98. left: 0;
  99. height: 1px;
  100. -webkit-transform: scaleY(0.5);
  101. transform: scaleY(0.5);
  102. background-color: $uni-border-color;
  103. z-index: 1;
  104. }
  105. .uni-list--border-bottom {
  106. position: absolute;
  107. bottom: 0;
  108. right: 0;
  109. left: 0;
  110. height: 1px;
  111. -webkit-transform: scaleY(0.5);
  112. transform: scaleY(0.5);
  113. background-color: $uni-border-color;
  114. }
  115. /* #endif */
  116. </style>