From 9ab4955166b7b1370fc2a49b152353241ca9e64a Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 16 十月 2023 09:22:23 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-skeleton/u-skeleton.vue | 244 ------------------------------------------------
1 files changed, 0 insertions(+), 244 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-skeleton/u-skeleton.vue b/minipro_standard/uni_modules/uview-ui/components/u-skeleton/u-skeleton.vue
index efa649e..e69de29 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-skeleton/u-skeleton.vue
+++ b/minipro_standard/uni_modules/uview-ui/components/u-skeleton/u-skeleton.vue
@@ -1,244 +0,0 @@
-<template>
- <view class="u-skeleton">
- <view
- class="u-skeleton__wrapper"
- ref="u-skeleton__wrapper"
- v-if="loading"
- style="display: flex; flex-direction: row;"
- >
- <view
- class="u-skeleton__wrapper__avatar"
- v-if="avatar"
- :class="[`u-skeleton__wrapper__avatar--${avatarShape}`, animate && 'animate']"
- :style="{
- height: $u.addUnit(avatarSize),
- width: $u.addUnit(avatarSize)
- }"
- ></view>
- <view
- class="u-skeleton__wrapper__content"
- ref="u-skeleton__wrapper__content"
- style="flex: 1;"
- >
- <view
- class="u-skeleton__wrapper__content__title"
- v-if="title"
- :style="{
- width: uTitleWidth,
- height: $u.addUnit(titleHeight),
- }"
- :class="[animate && 'animate']"
- ></view>
- <view
- class="u-skeleton__wrapper__content__rows"
- :class="[animate && 'animate']"
- v-for="(item, index) in rowsArray"
- :key="index"
- :style="{
- width: item.width,
- height: item.height,
- marginTop: item.marginTop
- }"
- >
-
- </view>
- </view>
- </view>
- <slot v-else />
- </view>
-</template>
-
-<script>
- import props from './props.js';
- // #ifdef APP-NVUE
- // 鐢变簬weex涓洪樋閲岀殑KPI涓氱哗鑰冩牳鐨勪骇鐗╋紝鎵�浠ヤ笉鏀寔鐧惧垎姣斿崟浣嶏紝杩欓噷闇�瑕侀�氳繃dom鏌ヨ缁勪欢鐨勫搴�
- const dom = uni.requireNativePlugin('dom')
- const animation = uni.requireNativePlugin('animation')
- // #endif
- /**
- * Skeleton 楠ㄦ灦灞�
- * @description 楠ㄦ灦灞忎竴鑸敤浜庨〉闈㈠湪璇锋眰杩滅▼鏁版嵁灏氭湭瀹屾垚鏃讹紝椤甸潰鐢ㄧ伆鑹插潡棰勬樉绀烘湰鏉ョ殑椤甸潰缁撴瀯锛岀粰鐢ㄦ埛鏇村ソ鐨勪綋楠屻��
- * @tutorial https://www.uviewui.com/components/skeleton.html
- * @property {Boolean} loading 鏄惁鏄剧ず楠ㄦ灦鍗犱綅鍥撅紝璁剧疆涓篺alse灏嗕細灞曠ず瀛愮粍浠跺唴瀹� (榛樿 true )
- * @property {Boolean} animate 鏄惁寮�鍚姩鐢绘晥鏋� (榛樿 true )
- * @property {String | Number} rows 娈佃惤鍗犱綅鍥捐鏁� (榛樿 0 )
- * @property {String | Number | Array} rowsWidth 娈佃惤鍗犱綅鍥剧殑瀹藉害锛屽彲浠ヤ负鐧惧垎姣旓紝鏁板�硷紝甯﹀崟浣嶅瓧绗︿覆绛夛紝鍙�氳繃鏁扮粍浼犲叆鎸囧畾姣忎釜娈佃惤琛岀殑瀹藉害 (榛樿 '100%' )
- * @property {String | Number | Array} rowsHeight 娈佃惤鐨勯珮搴� (榛樿 18 )
- * @property {Boolean} title 鏄惁灞曠ず鏍囬鍗犱綅鍥� (榛樿 true )
- * @property {String | Number} titleWidth 鏍囬鐨勫搴� (榛樿 '50%' )
- * @property {String | Number} titleHeight 鏍囬鐨勯珮搴� (榛樿 18 )
- * @property {Boolean} avatar 鏄惁灞曠ず澶村儚鍗犱綅鍥� (榛樿 false )
- * @property {String | Number} avatarSize 澶村儚鍗犱綅鍥惧ぇ灏� (榛樿 32 )
- * @property {String} avatarShape 澶村儚鍗犱綅鍥剧殑褰㈢姸锛宑ircle-鍦嗗舰锛宻quare-鏂瑰舰 (榛樿 'circle' )
- * @example <u-search placeholder="鏃ョ収棣欑倝鐢熺传鐑�" v-model="keyword"></u-search>
- */
- export default {
- name: 'u-skeleton',
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- data() {
- return {
- width: 0,
- }
- },
- watch: {
- loading() {
- this.getComponentWidth()
- }
- },
- computed: {
- rowsArray() {
- if (/%$/.test(this.rowsHeight)) {
- uni.$u.error('rowsHeight鍙傛暟涓嶆敮鎸佺櫨鍒嗘瘮鍗曚綅')
- }
- const rows = []
- for (let i = 0; i < this.rows; i++) {
- let item = {},
- // 闇�瑕侀闃茶秴鍑烘暟缁勮竟鐣岀殑鎯呭喌
- rowWidth = uni.$u.test.array(this.rowsWidth) ? (this.rowsWidth[i] || (i === this.row - 1 ? '70%' : '100%')) : i ===
- this.rows - 1 ? '70%' : this.rowsWidth,
- rowHeight = uni.$u.test.array(this.rowsHeight) ? (this.rowsHeight[i] || '18px') : this.rowsHeight
- // 濡傛灉鏈塼itle鍗犱綅鍥撅紝绗竴涓钀藉崰浣嶅浘鐨勫杈硅窛闇�瑕佸ぇ涓�浜涳紝濡傛灉娌℃湁title鍗犱綅鍥撅紝绗竴涓钀藉崰浣嶅浘鍒欐棤闇�澶栬竟璺�
- // 涔嬫墍浠ラ渶瑕佽繖涔堝仛锛屾槸鍥犱负weex鐨勬棤鑳斤紝浠ユ彁鍗囨�ц兘涓哄�熷彛涓嶆敮鎸乧ss鐨勪竴浜涗吉绫�
- item.marginTop = !this.title && i === 0 ? 0 : this.title && i === 0 ? '20px' : '12px'
- // 濡傛灉璁剧疆鐨勪负鐧惧垎姣旂殑瀹藉害锛岃浆鎹负px鍊硷紝鍥犱负nvue涓嶆敮鎸佺櫨鍒嗘瘮鍗曚綅
- if (/%$/.test(rowWidth)) {
- // 閫氳繃parseInt鎻愬彇鍑虹櫨鍒嗘瘮鍗曚綅涓殑鏁板�奸儴鍒嗭紝闄や互100寰楀埌鐧惧垎姣旂殑灏忔暟鍊�
- item.width = uni.$u.addUnit(this.width * parseInt(rowWidth) / 100)
- } else {
- item.width = uni.$u.addUnit(rowWidth)
- }
- item.height = uni.$u.addUnit(rowHeight)
- rows.push(item)
- }
- // console.log(rows);
- return rows
- },
- uTitleWidth() {
- let tWidth = 0
- if (/%$/.test(this.titleWidth)) {
- // 閫氳繃parseInt鎻愬彇鍑虹櫨鍒嗘瘮鍗曚綅涓殑鏁板�奸儴鍒嗭紝闄や互100寰楀埌鐧惧垎姣旂殑灏忔暟鍊�
- tWidth = uni.$u.addUnit(this.width * parseInt(this.titleWidth) / 100)
- } else {
- tWidth = uni.$u.addUnit(this.titleWidth)
- }
- return uni.$u.addUnit(tWidth)
- },
-
- },
- mounted() {
- this.init()
- },
- methods: {
- init() {
- this.getComponentWidth()
- // #ifdef APP-NVUE
- this.loading && this.animate && this.setNvueAnimation()
- // #endif
- },
- async setNvueAnimation() {
- // #ifdef APP-NVUE
- // 涓轰簡璁﹐pacity:1鐨勭姸鎬佷繚鎸佷竴瀹氭椂闂达紝杩欓噷鍋氫竴涓欢鏃�
- await uni.$u.sleep(500)
- const skeleton = this.$refs['u-skeleton__wrapper'];
- skeleton && this.loading && this.animate && animation.transition(skeleton, {
- styles: {
- opacity: 0.5
- },
- duration: 600,
- }, () => {
- // 杩欓噷鏃犻渶鍒ゆ柇鏄惁loading鍜屽紑鍚姩鐢荤姸鎬侊紝鍥犱负鏈�缁堢殑鐘舵�佸繀椤昏揪鍒皁pacity: 1锛屽惁鍒欏彲鑳�
- // 浼氬仠鐣欏湪opacity: 0.5鐨勭姸鎬佷腑
- animation.transition(skeleton, {
- styles: {
- opacity: 1
- },
- duration: 600,
- }, () => {
- // 鍙湁鍦╨oading涓椂锛屾墠鎵ц鍔ㄧ敾
- this.loading && this.animate && this.setNvueAnimation()
- })
- })
- // #endif
- },
- // 鑾峰彇缁勪欢鐨勫搴�
- async getComponentWidth() {
- // 寤舵椂涓�瀹氭椂闂达紝浠ヨ幏鍙杁om灏哄
- await uni.$u.sleep(20)
- // #ifndef APP-NVUE
- this.$uGetRect('.u-skeleton__wrapper__content').then(size => {
- this.width = size.width
- })
- // #endif
-
- // #ifdef APP-NVUE
- const ref = this.$refs['u-skeleton__wrapper__content']
- ref && dom.getComponentRect(ref, (res) => {
- this.width = res.size.width
- })
- // #endif
- }
- }
- }
-</script>
-
-<style lang="scss" scoped>
- @import "../../libs/css/components.scss";
-
- @mixin background {
- /* #ifdef APP-NVUE */
- background-color: #F1F2F4;
- /* #endif */
- /* #ifndef APP-NVUE */
- background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
- background-size: 400% 100%;
- /* #endif */
- }
-
- .u-skeleton {
- flex: 1;
-
- &__wrapper {
- @include flex(row);
-
- &__avatar {
- @include background;
- margin-right: 15px;
-
- &--circle {
- border-radius: 100px;
- }
-
- &--square {
- border-radius: 4px;
- }
- }
-
- &__content {
- flex: 1;
-
- &__rows,
- &__title {
- @include background;
- border-radius: 3px;
- }
- }
- }
- }
-
- /* #ifndef APP-NVUE */
- .animate {
- animation: skeleton 1.8s ease infinite
- }
-
- @keyframes skeleton {
- 0% {
- background-position: 100% 50%
- }
-
- 100% {
- background-position: 0 50%
- }
- }
-
- /* #endif */
-</style>
--
Gitblit v1.9.3