uni-list.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <!-- #ifndef APP-NVUE -->
  3. <view class="uni-list">
  4. <slot />
  5. </view>
  6. <!-- #endif -->
  7. <!-- #ifdef APP-NVUE -->
  8. <list class="uni-list" :enableBackToTop="enableBackToTop" loadmoreoffset="15" :scroll-y="scrollY" @loadmore="loadMore">
  9. <slot />
  10. </list>
  11. <!-- #endif -->
  12. </template>
  13. <script>
  14. /**
  15. * List 列表
  16. * @description 列表组件
  17. * @tutorial https://ext.dcloud.net.cn/plugin?id=24
  18. */
  19. export default {
  20. name: 'UniList',
  21. 'mp-weixin': {
  22. options: {
  23. multipleSlots: false
  24. }
  25. },
  26. props: {
  27. enableBackToTop: {
  28. type: [Boolean, String],
  29. default: false
  30. },
  31. scrollY: {
  32. type: [Boolean, String],
  33. default: false
  34. }
  35. },
  36. provide() {
  37. return {
  38. list: this
  39. }
  40. },
  41. created() {
  42. this.firstChildAppend = false
  43. },
  44. methods: {
  45. loadMore(e) {
  46. this.$emit("scrolltolower");
  47. }
  48. }
  49. }
  50. </script>
  51. <style scoped>
  52. .uni-list {
  53. /* #ifndef APP-NVUE */
  54. display: flex;
  55. /* #endif */
  56. background-color: #ffffff;
  57. position: relative;
  58. flex-direction: column;
  59. /* border-bottom-color: $uni-border-color;
  60. */
  61. /* border-bottom-style: solid;
  62. */
  63. /* border-bottom-width: 1px;
  64. */
  65. }
  66. /* #ifndef APP-NVUE */
  67. .uni-list:before {
  68. height: 0;
  69. }
  70. .uni-list:after {
  71. height: 0;
  72. }
  73. /* #endif */
  74. </style>