江西小程序管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

244 lines
7.1 KiB

1 year ago
  1. <template>
  2. <view class="u-skeleton">
  3. <view
  4. class="u-skeleton__wrapper"
  5. ref="u-skeleton__wrapper"
  6. v-if="loading"
  7. style="display: flex; flex-direction: row;"
  8. >
  9. <view
  10. class="u-skeleton__wrapper__avatar"
  11. v-if="avatar"
  12. :class="[`u-skeleton__wrapper__avatar--${avatarShape}`, animate && 'animate']"
  13. :style="{
  14. height: $u.addUnit(avatarSize),
  15. width: $u.addUnit(avatarSize)
  16. }"
  17. ></view>
  18. <view
  19. class="u-skeleton__wrapper__content"
  20. ref="u-skeleton__wrapper__content"
  21. style="flex: 1;"
  22. >
  23. <view
  24. class="u-skeleton__wrapper__content__title"
  25. v-if="title"
  26. :style="{
  27. width: uTitleWidth,
  28. height: $u.addUnit(titleHeight),
  29. }"
  30. :class="[animate && 'animate']"
  31. ></view>
  32. <view
  33. class="u-skeleton__wrapper__content__rows"
  34. :class="[animate && 'animate']"
  35. v-for="(item, index) in rowsArray"
  36. :key="index"
  37. :style="{
  38. width: item.width,
  39. height: item.height,
  40. marginTop: item.marginTop
  41. }"
  42. >
  43. </view>
  44. </view>
  45. </view>
  46. <slot v-else />
  47. </view>
  48. </template>
  49. <script>
  50. import props from './props.js';
  51. // #ifdef APP-NVUE
  52. // 由于weex为阿里的KPI业绩考核的产物,所以不支持百分比单位,这里需要通过dom查询组件的宽度
  53. const dom = uni.requireNativePlugin('dom')
  54. const animation = uni.requireNativePlugin('animation')
  55. // #endif
  56. /**
  57. * Skeleton 骨架屏
  58. * @description 骨架屏一般用于页面在请求远程数据尚未完成时页面用灰色块预显示本来的页面结构给用户更好的体验
  59. * @tutorial https://www.uviewui.com/components/skeleton.html
  60. * @property {Boolean} loading 是否显示骨架占位图设置为false将会展示子组件内容 (默认 true )
  61. * @property {Boolean} animate 是否开启动画效果 (默认 true )
  62. * @property {String | Number} rows 段落占位图行数 (默认 0 )
  63. * @property {String | Number | Array} rowsWidth 段落占位图的宽度可以为百分比数值带单位字符串等可通过数组传入指定每个段落行的宽度 (默认 '100%' )
  64. * @property {String | Number | Array} rowsHeight 段落的高度 (默认 18 )
  65. * @property {Boolean} title 是否展示标题占位图 (默认 true )
  66. * @property {String | Number} titleWidth 标题的宽度 (默认 '50%' )
  67. * @property {String | Number} titleHeight 标题的高度 (默认 18 )
  68. * @property {Boolean} avatar 是否展示头像占位图 (默认 false )
  69. * @property {String | Number} avatarSize 头像占位图大小 (默认 32 )
  70. * @property {String} avatarShape 头像占位图的形状circle-圆形square-方形 (默认 'circle' )
  71. * @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
  72. */
  73. export default {
  74. name: 'u-skeleton',
  75. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  76. data() {
  77. return {
  78. width: 0,
  79. }
  80. },
  81. watch: {
  82. loading() {
  83. this.getComponentWidth()
  84. }
  85. },
  86. computed: {
  87. rowsArray() {
  88. if (/%$/.test(this.rowsHeight)) {
  89. uni.$u.error('rowsHeight参数不支持百分比单位')
  90. }
  91. const rows = []
  92. for (let i = 0; i < this.rows; i++) {
  93. let item = {},
  94. // 需要预防超出数组边界的情况
  95. rowWidth = uni.$u.test.array(this.rowsWidth) ? (this.rowsWidth[i] || (i === this.row - 1 ? '70%' : '100%')) : i ===
  96. this.rows - 1 ? '70%' : this.rowsWidth,
  97. rowHeight = uni.$u.test.array(this.rowsHeight) ? (this.rowsHeight[i] || '18px') : this.rowsHeight
  98. // 如果有title占位图,第一个段落占位图的外边距需要大一些,如果没有title占位图,第一个段落占位图则无需外边距
  99. // 之所以需要这么做,是因为weex的无能,以提升性能为借口不支持css的一些伪类
  100. item.marginTop = !this.title && i === 0 ? 0 : this.title && i === 0 ? '20px' : '12px'
  101. // 如果设置的为百分比的宽度,转换为px值,因为nvue不支持百分比单位
  102. if (/%$/.test(rowWidth)) {
  103. // 通过parseInt提取出百分比单位中的数值部分,除以100得到百分比的小数值
  104. item.width = uni.$u.addUnit(this.width * parseInt(rowWidth) / 100)
  105. } else {
  106. item.width = uni.$u.addUnit(rowWidth)
  107. }
  108. item.height = uni.$u.addUnit(rowHeight)
  109. rows.push(item)
  110. }
  111. // console.log(rows);
  112. return rows
  113. },
  114. uTitleWidth() {
  115. let tWidth = 0
  116. if (/%$/.test(this.titleWidth)) {
  117. // 通过parseInt提取出百分比单位中的数值部分,除以100得到百分比的小数值
  118. tWidth = uni.$u.addUnit(this.width * parseInt(this.titleWidth) / 100)
  119. } else {
  120. tWidth = uni.$u.addUnit(this.titleWidth)
  121. }
  122. return uni.$u.addUnit(tWidth)
  123. },
  124. },
  125. mounted() {
  126. this.init()
  127. },
  128. methods: {
  129. init() {
  130. this.getComponentWidth()
  131. // #ifdef APP-NVUE
  132. this.loading && this.animate && this.setNvueAnimation()
  133. // #endif
  134. },
  135. async setNvueAnimation() {
  136. // #ifdef APP-NVUE
  137. // 为了让opacity:1的状态保持一定时间,这里做一个延时
  138. await uni.$u.sleep(500)
  139. const skeleton = this.$refs['u-skeleton__wrapper'];
  140. skeleton && this.loading && this.animate && animation.transition(skeleton, {
  141. styles: {
  142. opacity: 0.5
  143. },
  144. duration: 600,
  145. }, () => {
  146. // 这里无需判断是否loading和开启动画状态,因为最终的状态必须达到opacity: 1,否则可能
  147. // 会停留在opacity: 0.5的状态中
  148. animation.transition(skeleton, {
  149. styles: {
  150. opacity: 1
  151. },
  152. duration: 600,
  153. }, () => {
  154. // 只有在loading中时,才执行动画
  155. this.loading && this.animate && this.setNvueAnimation()
  156. })
  157. })
  158. // #endif
  159. },
  160. // 获取组件的宽度
  161. async getComponentWidth() {
  162. // 延时一定时间,以获取dom尺寸
  163. await uni.$u.sleep(20)
  164. // #ifndef APP-NVUE
  165. this.$uGetRect('.u-skeleton__wrapper__content').then(size => {
  166. this.width = size.width
  167. })
  168. // #endif
  169. // #ifdef APP-NVUE
  170. const ref = this.$refs['u-skeleton__wrapper__content']
  171. ref && dom.getComponentRect(ref, (res) => {
  172. this.width = res.size.width
  173. })
  174. // #endif
  175. }
  176. }
  177. }
  178. </script>
  179. <style lang="scss" scoped>
  180. @import "../../libs/css/components.scss";
  181. @mixin background {
  182. /* #ifdef APP-NVUE */
  183. background-color: #F1F2F4;
  184. /* #endif */
  185. /* #ifndef APP-NVUE */
  186. background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
  187. background-size: 400% 100%;
  188. /* #endif */
  189. }
  190. .u-skeleton {
  191. flex: 1;
  192. &__wrapper {
  193. @include flex(row);
  194. &__avatar {
  195. @include background;
  196. margin-right: 15px;
  197. &--circle {
  198. border-radius: 100px;
  199. }
  200. &--square {
  201. border-radius: 4px;
  202. }
  203. }
  204. &__content {
  205. flex: 1;
  206. &__rows,
  207. &__title {
  208. @include background;
  209. border-radius: 3px;
  210. }
  211. }
  212. }
  213. }
  214. /* #ifndef APP-NVUE */
  215. .animate {
  216. animation: skeleton 1.8s ease infinite
  217. }
  218. @keyframes skeleton {
  219. 0% {
  220. background-position: 100% 50%
  221. }
  222. 100% {
  223. background-position: 0 50%
  224. }
  225. }
  226. /* #endif */
  227. </style>