skeleton.nvue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <template>
  2. <view class="u-page">
  3. <view class="u-demo-block">
  4. <text class="u-demo-block__title">基础使用</text>
  5. <view class="u-demo-block__content">
  6. <u-skeleton
  7. rows="3"
  8. title
  9. loading
  10. ></u-skeleton>
  11. </view>
  12. </view>
  13. <view class="u-demo-block">
  14. <text class="u-demo-block__title">自定义段落行数</text>
  15. <view class="u-demo-block__content">
  16. <u-skeleton
  17. rows="2"
  18. title
  19. loading
  20. ></u-skeleton>
  21. </view>
  22. </view>
  23. <view class="u-demo-block">
  24. <text class="u-demo-block__title">设置段落宽度</text>
  25. <view class="u-demo-block__content">
  26. <u-skeleton
  27. rows="2"
  28. title
  29. :rowsWidth="['100%', '35%']"
  30. loading
  31. ></u-skeleton>
  32. </view>
  33. </view>
  34. <view class="u-demo-block">
  35. <text class="u-demo-block__title">设置段落高度</text>
  36. <view class="u-demo-block__content">
  37. <u-skeleton
  38. rows="3"
  39. title
  40. :rowsWidth="['100%', '100%', '100%']"
  41. :rowsHeight="['18px', '18px', '80px']"
  42. loading
  43. ></u-skeleton>
  44. </view>
  45. </view>
  46. <view class="u-demo-block">
  47. <text class="u-demo-block__title">是否开启动画</text>
  48. <u-switch
  49. v-model="switch1"
  50. space="2"
  51. inactiveColor="#e6e6e6"
  52. ></u-switch>
  53. <u-gap
  54. height="15"
  55. bgColor="#fff"
  56. ></u-gap>
  57. <view class="u-demo-block__content">
  58. <u-skeleton
  59. :animate="switch1"
  60. rows="3"
  61. title
  62. loading
  63. ></u-skeleton>
  64. </view>
  65. </view>
  66. <view class="u-demo-block">
  67. <text class="u-demo-block__title">展示头像</text>
  68. <u-gap
  69. height="15"
  70. bgColor="#fff"
  71. ></u-gap>
  72. <view class="u-demo-block__content">
  73. <u-skeleton
  74. :animate="switch1"
  75. rows="3"
  76. title
  77. loading
  78. avatar
  79. ></u-skeleton>
  80. </view>
  81. </view>
  82. <view class="u-demo-block">
  83. <text class="u-demo-block__title">切换状态</text>
  84. <u-switch
  85. v-model="switch2"
  86. space="2"
  87. inactiveColor="#e6e6e6"
  88. ></u-switch>
  89. <u-gap
  90. height="15"
  91. bgColor="#fff"
  92. ></u-gap>
  93. <view class="u-demo-block__content">
  94. <u-skeleton
  95. rows="2"
  96. title
  97. :loading="switch2"
  98. avatar
  99. rowsHeight="14"
  100. >
  101. <!-- 需要在外部多嵌套一层占位view,否则在nvue下会导致样式失效 -->
  102. <view>
  103. <view class="u-skeleton-slot">
  104. <image
  105. src="/static/uview/common/logo.png"
  106. class="u-skeleton-slot__image"
  107. ></image>
  108. <view class="u-skeleton-slot__content">
  109. <u--text
  110. text="利剑出鞘,一统江湖"
  111. type="main"
  112. size="16"
  113. ></u--text>
  114. <u--text
  115. type="tips"
  116. size="14"
  117. customStyle="margin-top: 5px"
  118. text="众多组件覆盖开发过程的各个需求,组件功能丰富,多端兼容。让您快速集成,开箱即用"
  119. ></u--text>
  120. </view>
  121. </view>
  122. </view>
  123. </u-skeleton>
  124. </view>
  125. <u-gap height="50" bgColor="transparent"></u-gap>
  126. </view>
  127. </view>
  128. </template>
  129. <script>
  130. export default {
  131. data() {
  132. return {
  133. switch1: true,
  134. switch2: false
  135. }
  136. }
  137. }
  138. </script>
  139. <style lang="scss">
  140. .u-skeleton-slot {
  141. @include flex;
  142. align-items: flex-start;
  143. &__image {
  144. width: 40px;
  145. height: 40px;
  146. border-radius: 100px;
  147. }
  148. &__content {
  149. margin-left: 10px;
  150. flex: 1;
  151. }
  152. }
  153. </style>