uview-ultra 4.5.46

package/components/up-loading-icon/up-loading-icon.vue

@@ -0,0 +1,357 @@
+<template>
+	<view
+		class="up-loading-icon"
+		:style="[addStyle(customStyle)]"
+		:class="[vertical && 'up-loading-icon--vertical']"
+		v-if="show"
+	>
+		<view
+			v-if="!webviewHide"
+			class="up-loading-icon__spinner"
+			:class="[`up-loading-icon__spinner--${mode}`]"
+			ref="ani"
+			:style="{
+				color: color,
+				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 : ''
+			}"
+		>
+			<template v-if="mode === 'spinner'">
+				<!-- #ifndef APP-NVUE -->
+				<view
+					v-for="(item, index) in array12"
+					:key="index"
+					class="up-loading-icon__dot"
+				>
+				</view>
+				<!-- #endif -->
+				<!-- #ifdef APP-NVUE -->
+				<!-- 此组件内部图标部分无法设置宽高，即使通过width和height配置了也无效 -->
+				<loading-indicator
+					v-if="!webviewHide"
+					class="up-loading-indicator"
+					:animating="true"
+					:style="{
+						color: color,
+						width: addUnit(size),
+						height: addUnit(size)
+					}"
+				/>
+				<!-- #endif -->
+			</template>
+		</view>
+		<text
+			v-if="text"
+			class="up-loading-icon__text"
+			:style="{
+				fontSize: addUnit(textSize),
+				color: textColor,
+			}"
+		>{{text}}</text>
+	</view>
+</template>
+
+<script setup>
+	import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+	import { propsLoadicon } from './props.js'
+	import { commonProps } from '../../libs/composable/useUltraUI.js'
+	import { addUnit, addStyle } from '../../libs/function/index.js'
+	import { colorGradient } from '../../libs/function/colorGradient.js'
+	// #ifdef APP-NVUE
+	const animation = weex.requireModule('animation')
+	// #endif
+	/**
+	 * loading 加载动画
+	 * @description 警此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。
+	 * @tutorial https://ijry.github.io/uview-plus/components/loading.html
+	 * @property {Boolean}			show			是否显示组件  (默认 true)
+	 * @property {String}			color			动画活动区域的颜色，只对 mode = flower 模式有效（默认color['up-tips-color']）
+	 * @property {String}			textColor		提示文本的颜色（默认color['up-tips-color']）
+	 * @property {Boolean}			vertical		文字和图标是否垂直排列 (默认 false )
+	 * @property {String}			mode			模式选择，见官网说明（默认 'circle' ）
+	 * @property {String | Number}	size			加载图标的大小，单位px （默认 24 ）
+	 * @property {String | Number}	textSize		文字大小（默认 15 ）
+	 * @property {String | Number}	text			文字内容 
+	 * @property {String}			timingFunction	动画模式 （默认 'ease-in-out' ）
+	 * @property {String | Number}	duration		动画执行周期时间（默认 1200）
+	 * @property {String}			inactiveColor	mode=circle时的暗边颜色 
+	 * @property {Object}			customStyle		定义需要用到的外部样式
+	 * @example <up-loading mode="circle"></up-loading>
+	 */
+	defineOptions({
+		name: 'up-loading-icon',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+
+	const props = defineProps({
+		...commonProps,
+		...propsLoadicon.props
+	})
+	const instance = getCurrentInstance()
+	// Array.form可以通过一个伪数组对象创建指定长度的数组
+	const array12 = Array.from({
+		length: 12
+	})
+	// 这里需要设置默认值为360，否则在安卓nvue上，会延迟一个duration周期后才执行
+	const aniAngel = ref(360) // 动画旋转角度
+	const webviewHide = ref(false) // 监听webview的状态，如果隐藏了页面，则停止动画，以免性能消耗
+	const loading = ref(false) // 是否运行中，针对nvue使用
+
+	// 当为circle类型时，给其另外三边设置一个更轻一些的颜色
+	const otherBorderColor = computed(() => {
+		const lightColor = colorGradient(props.color, '#ffffff', 100)[80]
+		if (props.mode === 'circle') {
+			return props.inactiveColor ? props.inactiveColor : lightColor
+		}
+		return 'transparent'
+	})
+
+	function init() {
+		setTimeout(() => {
+			// #ifdef APP-NVUE
+			props.show && nvueAnimate()
+			// #endif
+			// #ifdef APP-PLUS
+			props.show && addEventListenerToWebview()
+			// #endif
+		}, 20)
+	}
+
+	// 监听webview的显示与隐藏
+	function addEventListenerToWebview() {
+		// webview的堆栈
+		const pages = getCurrentPages()
+		// 当前页面
+		const page = pages[pages.length - 1]
+		// 当前页面的webview实例
+		const currentWebview = page.$getAppWebview()
+		// 监听webview的显示与隐藏，从而停止或者开始动画(为了性能)
+		currentWebview.addEventListener('hide', () => {
+			webviewHide.value = true
+		})
+		currentWebview.addEventListener('show', () => {
+			webviewHide.value = false
+		})
+	}
+
+	// #ifdef APP-NVUE
+	function nvueAnimate() {
+		// nvue下，非spinner类型时才需要旋转，因为nvue的spinner类型，使用了weex的
+		// loading-indicator组件，自带旋转功能
+		props.mode !== 'spinner' && startAnimate()
+	}
+
+	// 执行nvue的animate模块动画
+	function startAnimate() {
+		loading.value = true
+		const ani = instance.proxy.$refs.ani
+		if (!ani) return
+		animation.transition(ani, {
+			// 进行角度旋转
+			styles: {
+				transform: `rotate(${aniAngel.value}deg)`,
+				transformOrigin: 'center center'
+			},
+			duration: props.duration,
+			timingFunction: props.timingFunction,
+		}, () => {
+			// 每次增加360deg，为了让其重新旋转一周
+			aniAngel.value += 360
+			// 动画结束后，继续循环执行动画，需要同时判断webviewHide变量
+			props.show && !webviewHide.value ? startAnimate() : loading.value = false
+		})
+	}
+	// #endif
+
+	watch(() => props.show, (n) => {
+		// nvue中，show为true，且为非loading状态，就重新执行动画模块
+		// #ifdef APP-NVUE
+		if (n && !loading.value) {
+			setTimeout(() => {
+				startAnimate()
+			}, 30)
+		}
+		// #endif
+	})
+
+	onMounted(() => {
+		init()
+	})
+
+	defineExpose({
+		init,
+		addEventListenerToWebview,
+		// #ifdef APP-NVUE
+		nvueAnimate,
+		startAnimate,
+		// #endif
+		webviewHide,
+		loading
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	$up-loading-icon-color: #c8c9cc !default;
+	$up-loading-icon-text-margin-left:4px !default;
+	$up-loading-icon-text-color:$up-content-color !default;
+	$up-loading-icon-text-font-size:14px !default;
+	$up-loading-icon-text-line-height:20px !default;
+	$up-loading-width:30px !default;
+	$up-loading-height:30px !default;
+	$up-loading-max-width:100% !default;
+	$up-loading-max-height:100% !default;
+	$up-loading-semicircle-border-width: 2px !default;
+	$up-loading-semicircle-border-color:transparent !default;
+	$up-loading-semicircle-border-top-right-radius: 100px !default;
+	$up-loading-semicircle-border-top-left-radius: 100px !default;
+	$up-loading-semicircle-border-bottom-left-radius: 100px !default;
+	$up-loading-semicircle-border-bottom-right-radiu: 100px !default;
+	$up-loading-semicircle-border-style: solid !default;
+	$up-loading-circle-border-top-right-radius: 100px !default;
+	$up-loading-circle-border-top-left-radius: 100px !default;
+	$up-loading-circle-border-bottom-left-radius: 100px !default;
+	$up-loading-circle-border-bottom-right-radiu: 100px !default;
+	$up-loading-circle-border-width:2px !default;
+	$up-loading-circle-border-top-color:#e5e5e5 !default;
+	$up-loading-circle-border-right-color:$up-loading-circle-border-top-color !default;
+	$up-loading-circle-border-bottom-color:$up-loading-circle-border-top-color !default;
+	$up-loading-circle-border-left-color:$up-loading-circle-border-top-color !default;
+	$up-loading-circle-border-style:solid !default;
+	$up-loading-icon-host-font-size:0px !default;
+	$up-loading-icon-host-line-height:1 !default;
+	$up-loading-icon-vertical-margin:6px 0 0 !default;
+	$up-loading-icon-dot-top:0 !default;
+	$up-loading-icon-dot-left:0 !default;
+	$up-loading-icon-dot-width:100% !default;
+	$up-loading-icon-dot-height:100% !default;
+	$up-loading-icon-dot-before-width:2px !default;
+	$up-loading-icon-dot-before-height:25% !default;
+	$up-loading-icon-dot-before-margin:0 auto !default;
+	$up-loading-icon-dot-before-background-color:currentColor !default;
+	$up-loading-icon-dot-before-border-radius:40% !default;
+
+	.up-loading-icon {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		color: $up-loading-icon-color;
+
+		&__text {
+			margin-left: $up-loading-icon-text-margin-left;
+			color: $up-loading-icon-text-color;
+			font-size: $up-loading-icon-text-font-size;
+			line-height: $up-loading-icon-text-line-height;
+		}
+
+		&__spinner {
+			width: $up-loading-width;
+			height: $up-loading-height;
+			position: relative;
+			/* #ifndef APP-NVUE */
+			box-sizing: border-box;
+			max-width: $up-loading-max-width;
+			max-height: $up-loading-max-height;
+			animation: up-rotate 1s linear infinite;
+			/* #endif */
+		}
+
+		&__spinner--semicircle {
+			border-width: $up-loading-semicircle-border-width;
+			border-color: $up-loading-semicircle-border-color;
+			border-top-right-radius: $up-loading-semicircle-border-top-right-radius;
+			border-top-left-radius: $up-loading-semicircle-border-top-left-radius;
+			border-bottom-left-radius: $up-loading-semicircle-border-bottom-left-radius;
+			border-bottom-right-radius: $up-loading-semicircle-border-bottom-right-radiu;
+			border-style: $up-loading-semicircle-border-style;
+		}
+
+		&__spinner--circle {
+			border-top-right-radius: $up-loading-circle-border-top-right-radius;
+			border-top-left-radius: $up-loading-circle-border-top-left-radius;
+			border-bottom-left-radius: $up-loading-circle-border-bottom-left-radius;
+			border-bottom-right-radius: $up-loading-circle-border-bottom-right-radiu;
+			border-width: $up-loading-circle-border-width;
+			border-top-color: $up-loading-circle-border-top-color;
+			border-right-color: $up-loading-circle-border-right-color;
+			border-bottom-color: $up-loading-circle-border-bottom-color;
+			border-left-color: $up-loading-circle-border-left-color;
+			border-style: $up-loading-circle-border-style;
+		}
+
+		&--vertical {
+			flex-direction: column
+		}
+	}
+
+	/* #ifndef APP-NVUE */
+	: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 {
+				/* #ifndef APP-NVUE */
+				display: block;
+				/* #endif */
+				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;
+				content: " "
+			}
+		}
+	}
+
+	@for $i from 1 through 12 {
+		.up-loading-icon__dot:nth-of-type(#{$i}) {
+			transform: rotate($i * 30deg);
+			opacity: 1 - 0.0625 * ($i - 1);
+		}
+	}
+
+	@keyframes up-rotate {
+		0% {
+			transform: rotate(0deg)
+		}
+
+		to {
+			transform: rotate(1turn)
+		}
+	}
+
+	/* #endif */
+</style>

package/components/up-loading-page/loadingPage.js

@@ -0,0 +1,24 @@
+/*
+ * @Author       : LQ,jry
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-20 14:20:58
+ * @FilePath     : /uview-ultra/libs/config/props/loadingPage.js
+ */
+export default {
+    // loading-page组件
+    loadingPage: {
+        loadingText: '正在加载',
+        image: '',
+        loadingMode: 'circle',
+        loading: false,
+        bgColor: '#ffffff',
+        color: '#C8C8C8',
+        fontSize: 19,
+        iconSize: 28,
+        loadingColor: '#C8C8C8',
+        zIndex: 10
+    }
+}

package/components/up-loading-page/loadingPage.uts

@@ -0,0 +1,24 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-08-28 15:15:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 15:20:50
+ * @FilePath     : /uview-ultra/libs/config/props/loadingPage
+ */
+export default {
+    // loading-page组件
+    loadingPage: {
+        loadingText: '正在加载',
+        image: '',
+        loadingMode: 'circle',
+        loading: false,
+        bgColor: '#ffffff',
+        color: '#C8C8C8',
+        fontSize: 19,
+        iconSize: 28,
+        loadingColor: '#C8C8C8',
+        zIndex: 10
+    }
+} as UTSJSONObject

package/components/up-loading-page/props.js

@@ -0,0 +1,57 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+
+export const props = defineMixin({
+    props: {
+        // 提示内容
+        loadingText: {
+            type: [String, Number],
+            default: () => defProps.loadingPage.loadingText
+        },
+        // 文字上方用于替换loading动画的图片
+        image: {
+            type: String,
+            default: () => defProps.loadingPage.image
+        },
+        // 加载动画的模式，circle-圆形，spinner-花朵形，semicircle-半圆形
+        loadingMode: {
+            type: String,
+            default: () => defProps.loadingPage.loadingMode
+        },
+        // 是否加载中
+        loading: {
+            type: Boolean,
+            default: () => defProps.loadingPage.loading
+        },
+        // 背景色
+        bgColor: {
+            type: String,
+            default: () => defProps.loadingPage.bgColor
+        },
+        // 文字颜色
+        color: {
+            type: String,
+            default: () => defProps.loadingPage.color
+        },
+        // 文字大小
+        fontSize: {
+            type: [String, Number],
+            default: () => defProps.loadingPage.fontSize
+        },
+		// 图标大小
+		iconSize: {
+		    type: [String, Number],
+		    default: () => defProps.loadingPage.fontSize
+		},
+        // 加载中图标的颜色，只能rgb或者十六进制颜色值
+        loadingColor: {
+            type: String,
+            default: () => defProps.loadingPage.loadingColor
+        },
+        // 层级
+        zIndex: {
+            type: [Number],
+            default: () => defProps.loadingPage.zIndex
+        },
+    }
+})

package/components/up-loading-page/props.uts

@@ -0,0 +1,58 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from './loadingPage'
+let crtProp = defProps['loadingPage'] as UTSJSONObject
+
+export const propsLoadingPage = defineMixin({
+    props: {
+        // 提示内容
+        loadingText: {
+            type: [String, Number],
+            default: crtProp['loadingText']
+        },
+        // 文字上方用于替换loading动画的图片
+        image: {
+            type: String,
+            default: crtProp['image']
+        },
+        // 加载动画的模式，circle-圆形，spinner-花朵形，semicircle-半圆形
+        loadingMode: {
+            type: String,
+            default: crtProp['loadingMode']
+        },
+        // 是否加载中
+        loading: {
+            type: Boolean,
+            default: crtProp['loading']
+        },
+        // 背景色
+        bgColor: {
+            type: String,
+            default: crtProp['bgColor']
+        },
+        // 文字颜色
+        color: {
+            type: String,
+            default: crtProp['color']
+        },
+        // 文字大小
+        fontSize: {
+            type: [String, Number],
+            default: crtProp['fontSize']
+        },
+		// 图标大小
+		iconSize: {
+		    type: [String, Number],
+		    default: crtProp['fontSize']
+		},
+        // 加载中图标的颜色，只能rgb或者十六进制颜色值
+        loadingColor: {
+            type: String,
+            default: crtProp['loadingColor']
+        },
+        // 层级
+        zIndex: {
+            type: [Number],
+            default: crtProp['zIndex']
+        },
+    }
+})