fix: up-loading-icon组件旋转方案

ijry · Aug 28, 2024 · e2d17d6 · e2d17d6
1 parent c43ea2a
commit e2d17d6
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 38 deletions.
diff --git a/src/uni_modules/uview-plus/components/up-loading-icon/loadingIcon.uts b/src/uni_modules/uview-plus/components/up-loading-icon/loadingIcon.uts
@@ -1,11 +1,11 @@
 /*
- * @Author       : LQ
+ * @Author       : jry
  * @Description  :
- * @version      : 1.0
- * @Date         : 2021-08-20 16:44:21
- * @LastAuthor   : LQ
- * @lastTime     : 2021-08-20 17:45:47
- * @FilePath     : /u-view2.0/uview-ui/libs/config/props/loadingIcon.js
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 11:45:47
+ * @FilePath     : /uview-plus/libs/config/props/loadingIcon.js
  */
 import config from '../../libs/config/config.uts'
 // let color = config['color'] as UTSJSONObject

diff --git a/src/uni_modules/uview-plus/components/up-loading-icon/props.uts b/src/uni_modules/uview-plus/components/up-loading-icon/props.uts
@@ -1,5 +1,13 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 12:27:20
+ */
 import { defineMixin } from '../../libs/vue.uts'
-// import defProps from '../../libs/config/props.uts'
+// import defProps from '../../libs/config/props.uts'
 import defProps from './loadingIcon.uts'
 let crtProp = defProps['loadingIcon'] as UTSJSONObject
 

diff --git a/src/uni_modules/uview-plus/components/up-loading-icon/up-loading-icon.uvue b/src/uni_modules/uview-plus/components/up-loading-icon/up-loading-icon.uvue
@@ -10,22 +10,23 @@
 			:class="[`up-loading-icon__spinner--${mode}`]"
 			ref="ani"
 			:style="{
-				color: color,
+				transform: transform,
 				width: addUnit(size),
 				height: addUnit(size),
 				borderTopColor: color,
 				borderBottomColor: otherBorderColor,
 				borderLeftColor: otherBorderColor,
 				borderRightColor: otherBorderColor,
 				'animation-duration': `${duration}ms`,
-				'animation-timing-function': mode === 'semicircle' || mode === 'circle' ? timingFunction : ''
+				'animation-timing-function': (mode === 'semicircle' || mode === 'circle') ? timingFunction : ''
 			}"
 		>
 			<template v-if="mode === 'spinner'">
 				<view
 					v-for="(item, index) in array12"
 					:key="index"
 					class="up-loading-icon__dot"
+					:style="spinnerStyle[index]"
 				>
 				</view>
 			</template>
@@ -45,10 +46,11 @@
 	import { propsLoadicon } from './props';
 	import { mpMixin } from '../../libs/mixin/mpMixin';
 	import { mixin } from '../../libs/mixin/mixin';
-	import { addUnit, addStyle } from '../../libs/function/index';
+	import { addUnit, addStyle, getPx } from '../../libs/function/index';
 	import { colorGradient } from '../../libs/function/colorGradient';
 	/**
 	 * loading 加载动画
+	 * @author jry [email protected] 2024
 	 * @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
 	 * @tutorial https://ijry.github.io/uview-plus/components/loading.html
 	 * @property {Boolean}			show			是否显示组件  (默认 true)
@@ -76,6 +78,13 @@
 				aniAngel: 360, // 动画旋转角度
 				webviewHide: false, // 监听webview的状态，如果隐藏了页面，则停止动画，以免性能消耗
 				loading: false, // 是否运行中，针对nvue使用
+				degree: 0, // js方案旋转角度因为uni-app-x不支持keyframes
+				transform: '', // js方案旋转
+				spinnerStyle: [
+					{left: 0, top: 0},{left: 0, top: 0},{left: 0, top: 0},{left: 0, top: 0},
+					{left: 0, top: 0},{left: 0, top: 0},{left: 0, top: 0},{left: 0, top: 0},
+					{left: 0, top: 0},{left: 0, top: 0},{left: 0, top: 0},{left: 0, top: 0}
+				]
 			}
 		},
 		computed: {
@@ -99,36 +108,46 @@
 		mounted() {
 			this.init()
 		},
+		beforeMount() {
+			cancelAnimationFrame(this.rotateLoader)
+		},
 		methods: {
 			addStyle(val: any): any {
 				return addStyle(val)
 			},
 			addUnit(val: any): string {
 				return addUnit(val)
 			},
+			rotateLoader() {  
+				this.degree = (this.degree + 3) % 360; // 每次增加3度，循环回到0度  
+				this.transform = `rotate(${this.degree.toString()}deg)`;  
+				requestAnimationFrame(this.rotateLoader); // 递归调用以保持动画  
+			},
 			init() {
-				// setTimeout(() => {
-				// 	if (this.show) {
-				// 		this.addEventListenerToWebview()
-				// 	}
-				// }, 20)
+				this.calcSpinnerTopAndLeft()
+				this.rotateLoader()
+			},
+			calculateSquareRadius(sideLength: number) {  
+				// 计算正方形的对角线长度  
+				const diagonalLength = Math.sqrt(sideLength * sideLength + sideLength * sideLength);  
+				// 对角线长度的一半即为等效圆的半径  
+				const radius = diagonalLength / 2;  
+				return radius;  
+			},
+			// 因为uni-app-x不支持:before所以实现Spinner得用JS计算坐标
+			calcSpinnerTopAndLeft(){
+				this.array12.forEach((ele, index) => {
+					const angle = index * (360 / 12); // 计算角度  
+					const angleRad = angle * (Math.PI / 180); // 转换为弧度  
+					const banjing = this.calculateSquareRadius(parseInt(getPx(parseInt(this.size.toString()) * 2)));  // 半径
+					const xOffset = banjing * Math.cos(angleRad);
+					const yOffset = banjing * Math.sin(angleRad);  
+					// 假设.loading-container的position是relative，并且宽度和高度都是100% 
+					this.spinnerStyle[index]['left'] = `${Math.round(45 + xOffset).toString()}%`; 
+					this.spinnerStyle[index]['top'] = `${Math.round(34 + yOffset).toString()}%`;  
+					// 注意：这里可能需要调整50%的偏移量
+				})
 			},
-			// 监听webview的显示与隐藏
-			addEventListenerToWebview(): void {
-				// webview的堆栈
-				const pages = getCurrentPages()
-				// 当前页面
-				const page = pages[pages.length - 1]
-				// // 当前页面的webview实例
-				// const currentWebview = page.$getAppWebview()
-				// // 监听webview的显示与隐藏，从而停止或者开始动画(为了性能)
-				// currentWebview.addEventListener('hide', () => {
-				// 	this.webviewHide = true
-				// })
-				// currentWebview.addEventListener('show', () => {
-				// 	this.webviewHide = false
-				// })
-			}
 		}
 	}
 </script>
@@ -226,4 +245,58 @@
 			flex-direction: column
 		}
 	}
+
+	:host {
+		font-size: $up-loading-icon-host-font-size;
+		line-height: $up-loading-icon-host-line-height;
+	}
+
+	.up-loading-icon {
+		&__spinner--spinner {
+			animation-timing-function: steps(12)
+		}
+
+		&__text:empty {
+			display: none
+		}
+
+		&--vertical &__text {
+			margin: $up-loading-icon-vertical-margin;
+			color: $up-content-color;
+		}
+
+		&__dot {
+			position: absolute;
+			// top: $up-loading-icon-dot-top;
+			// left: $up-loading-icon-dot-left;
+			width: $up-loading-icon-dot-width;
+			height: $up-loading-icon-dot-height;
+
+			//&:before {
+				width: $up-loading-icon-dot-before-width;
+				height: $up-loading-icon-dot-before-height;
+				// margin: $up-loading-icon-dot-before-margin;
+				background-color: $up-loading-icon-dot-before-background-color;
+				border-radius: $up-loading-icon-dot-before-border-radius;
+			//}
+		}
+	}
+
+	$radius: v-bind(size)px;
+	@for $i from 1 through 12 {
+		.up-loading-icon__dot:nth-of-type(#{$i}) {
+			transform: rotate(($i + 2) * 30deg);
+			opacity: 1 - 0.0625 * ($i - 1);
+		}
+	}
+
+	@keyframes up-rotate {
+		0% {
+			transform: rotate(0deg)
+		}
+
+		to {
+			transform: rotate(1turn)
+		}
+	}
 </style>
diff --git a/uni-app-x/link.json b/uni-app-x/link.json
@@ -1,4 +1,5 @@
 {
+    // npx @dcloudio/toolkit link uview-plus
     // 当前项目目录与源目录的软链映射关系表
     // key 为当前项目的目录结构，value 为源目录
     "uni_modules": ["/Users/jry/Documents/www/xyito/open/uview-plus/src/uni_modules"]

diff --git a/uni-app-x/pages.json b/uni-app-x/pages.json
@@ -65,14 +65,14 @@
 				"style": {
 					"navigationBarTitleText": "按钮"
 				}
+			},
+			{
+				"path": "loading-icon/loading-icon",
+				"style": {
+					"navigationBarTitleText": "加载中图标"
+				}
 			}
-			// {
-			// 	"path": "loading-icon/loading-icon",
-			// 	"style": {
-			// 		"navigationBarTitleText": "加载中图标"
-			// 	}
-			// },
-			// {
+			// ,{
 			// 	"path": "overlay/overlay",
 			// 	"style": {
 			// 		"navigationBarTitleText": "遮罩层",

diff --git a/...omponentsA/loading-icon/loading-icon.nvue → ...omponentsA/loading-icon/loading-icon.uvue b/...omponentsA/loading-icon/loading-icon.nvue → ...omponentsA/loading-icon/loading-icon.uvue
@@ -1,4 +1,7 @@
 <template>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex:1">
+	<!-- #endif -->
 	<view class="u-page">
 		<view class="u-demo-block">
 			<text class="u-demo-block__title">基本案列</text>
@@ -52,6 +55,9 @@
 			</view>
 		</view>
 	</view>
+	<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
 </template>
 
 <script>