uni-list.vue 2.0 KB

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