From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
uni_modules/uview-ui/components/u-skeleton/u-skeleton.vue | 244 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 244 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-skeleton/u-skeleton.vue b/uni_modules/uview-ui/components/u-skeleton/u-skeleton.vue
new file mode 100644
index 0000000..efa649e
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-skeleton/u-skeleton.vue
@@ -0,0 +1,244 @@
+<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