提交 6d2c238b 编写于 作者: M mehaotian

update: uni-loading

上级 029b61cc
## 1.0.5(2024-01-12)
- 优化 删除组件内无用日志输出
## 1.0.4(2024-01-10)
- 优化 兼容 uvue h5 项目
## 1.0.3(2023-12-22)
......
<template>
<!-- #ifdef APP -->
<view :ref="elId" class="block" :style="{width:size+'px',height:size+'px'}"></view>
<!-- #endif -->
<!-- #ifdef WEB -->
<svg :width="size" :height="size" viewBox="25 25 50 50" :style="{width:size+'px',height:size+'px'}" class="uni-load__img uni-load__img--android-H5">
<circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="iconsSize"></circle>
</svg>
<!-- #endif -->
</template>
<script>
import { easeInOutCubic } from './util'
let elId = 0
export default {
name: "circle",
props: {
speed: {
type: Number,
default: 16,
},
size: {
type: Number,
default: 20,
},
color: {
type: String,
default: '#666',
}
},
data() {
// 防止多调用,随机元素id
elId += 1
const elID = `Uni_Load_Circle_${elId}`
return {
elId: elID,
timer: 0,
};
},
computed: {
iconsSize() : number {
console.log(this.size / 10);
return (this.size / 10) +1
}
},
mounted() {
// #ifdef APP
this.init()
// #endif
},
unmounted() {
// 组件卸载时,需要卸载定时器,优化性能,防止页面卡死
clearInterval(this.timer)
},
methods: {
/**
* 初始化圆环
*/
init() {
const refs = this.$refs[this.elId] as UniElement
let ctx = refs.getDrawableContext()!
this.build_circular(ctx)
},
/**
* 构建圆环动画
*/
build_circular(ctx : DrawableContext) {
let startAngle = 0;
let rotate = 0;
const ARC_LENGTH = 359;
const center = this.size / 2; // 圆心
const lineWidth = this.size / 10; // 圆环宽度
const duration = 1200; // 动画持续时间
const interval = this.speed; // 定时器间隔(大约 60 帧每秒)
// 使圆环过度更自然,不必运动到底
const ARC_MAX = 358
let startTime = 0;
let foreward_end = 0 // 正传
let reversal_end = ARC_MAX // 反转
function pogress_time() : number {
const currentTime = Date.now();
// 运动时间计算
const elapsedTime = currentTime - startTime;
const progress = elapsedTime / duration;
// 动画缓动
const easedProgress = easeInOutCubic(progress);
return easedProgress
}
const draw = () => {
ctx.reset();
ctx.beginPath();
if (reversal_end == ARC_MAX) {
foreward_end = Math.min(pogress_time() * ARC_LENGTH, ARC_LENGTH); // 限制 end 的最大值为 ARC_LENGTH
if (foreward_end >= ARC_MAX) {
reversal_end = 0
foreward_end = ARC_MAX
startTime = Date.now();
}
}
if (foreward_end == ARC_MAX) {
reversal_end = Math.min(pogress_time() * ARC_LENGTH, ARC_LENGTH);
if (reversal_end >= ARC_MAX) {
reversal_end = ARC_MAX
foreward_end = 0
startTime = Date.now();
}
}
ctx.arc(
center,
center,
center - lineWidth,
startAngle + rotate + (reversal_end * Math.PI / 180),
startAngle + rotate + (foreward_end * Math.PI / 180)
);
ctx.lineWidth = lineWidth;
const fillColor = (this.color !== '' ? this.color : '#666').toString();
ctx.strokeStyle = fillColor;
ctx.stroke();
ctx.update();
rotate += 0.05; // 旋转速度
}
this.timer = setInterval(() => draw(), interval);
}
}
}
</script>
<style scoped>
.block {
width: 50px;
height: 50px;
}
/* #ifdef WEB */
.uni-load__img {
width: 24px;
height: 24px;
}
.uni-load__img--android-H5 {
animation: loading-android-H5-rotate 2s linear infinite;
transform-origin: center center;
}
.uni-load__img--android-H5 circle {
display: inline-block;
animation: loading-android-H5-dash 1.5s ease-in-out infinite;
stroke: currentColor;
stroke-linecap: round;
}
@keyframes loading-android-H5-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-android-H5-dash {
0% {
stroke-dasharray: 1, 200;
/* stroke-dashoffset: 0; */
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -20;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120;
}
}
/* #endif */
<template>
<!-- #ifdef APP -->
<view :ref="elId" class="block" :style="{width:size+'px',height:size+'px'}"></view>
<!-- #endif -->
<!-- #ifdef WEB -->
<svg :width="size" :height="size" viewBox="25 25 50 50" :style="{width:size+'px',height:size+'px'}" class="uni-load__img uni-load__img--android-H5">
<circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="iconsSize"></circle>
</svg>
<!-- #endif -->
</template>
<script>
import { easeInOutCubic } from './util'
let elId = 0
export default {
name: "circle",
props: {
speed: {
type: Number,
default: 16,
},
size: {
type: Number,
default: 20,
},
color: {
type: String,
default: '#666',
}
},
data() {
// 防止多调用,随机元素id
elId += 1
const elID = `Uni_Load_Circle_${elId}`
return {
elId: elID,
timer: 0,
};
},
computed: {
iconsSize() : number {
return (this.size / 10) +1
}
},
mounted() {
// #ifdef APP
this.init()
// #endif
},
unmounted() {
// 组件卸载时,需要卸载定时器,优化性能,防止页面卡死
clearInterval(this.timer)
},
methods: {
/**
* 初始化圆环
*/
init() {
const refs = this.$refs[this.elId] as UniElement
let ctx = refs.getDrawableContext()!
this.build_circular(ctx)
},
/**
* 构建圆环动画
*/
build_circular(ctx : DrawableContext) {
let startAngle = 0;
let rotate = 0;
const ARC_LENGTH = 359;
const center = this.size / 2; // 圆心
const lineWidth = this.size / 10; // 圆环宽度
const duration = 1200; // 动画持续时间
const interval = this.speed; // 定时器间隔(大约 60 帧每秒)
// 使圆环过度更自然,不必运动到底
const ARC_MAX = 358
let startTime = 0;
let foreward_end = 0 // 正传
let reversal_end = ARC_MAX // 反转
function pogress_time() : number {
const currentTime = Date.now();
// 运动时间计算
const elapsedTime = currentTime - startTime;
const progress = elapsedTime / duration;
// 动画缓动
const easedProgress = easeInOutCubic(progress);
return easedProgress
}
const draw = () => {
ctx.reset();
ctx.beginPath();
if (reversal_end == ARC_MAX) {
foreward_end = Math.min(pogress_time() * ARC_LENGTH, ARC_LENGTH); // 限制 end 的最大值为 ARC_LENGTH
if (foreward_end >= ARC_MAX) {
reversal_end = 0
foreward_end = ARC_MAX
startTime = Date.now();
}
}
if (foreward_end == ARC_MAX) {
reversal_end = Math.min(pogress_time() * ARC_LENGTH, ARC_LENGTH);
if (reversal_end >= ARC_MAX) {
reversal_end = ARC_MAX
foreward_end = 0
startTime = Date.now();
}
}
ctx.arc(
center,
center,
center - lineWidth,
startAngle + rotate + (reversal_end * Math.PI / 180),
startAngle + rotate + (foreward_end * Math.PI / 180)
);
ctx.lineWidth = lineWidth;
const fillColor = (this.color !== '' ? this.color : '#666').toString();
ctx.strokeStyle = fillColor;
ctx.stroke();
ctx.update();
rotate += 0.05; // 旋转速度
}
this.timer = setInterval(() => draw(), interval);
}
}
}
</script>
<style scoped>
.block {
width: 50px;
height: 50px;
}
/* #ifdef WEB */
.uni-load__img {
width: 24px;
height: 24px;
}
.uni-load__img--android-H5 {
animation: loading-android-H5-rotate 2s linear infinite;
transform-origin: center center;
}
.uni-load__img--android-H5 circle {
display: inline-block;
animation: loading-android-H5-dash 1.5s ease-in-out infinite;
stroke: currentColor;
stroke-linecap: round;
}
@keyframes loading-android-H5-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loading-android-H5-dash {
0% {
stroke-dasharray: 1, 200;
/* stroke-dashoffset: 0; */
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -20;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -120;
}
}
/* #endif */
</style>
<template>
<uni-icons :id="elId" class='load-ani' :style="aniStyle" @transitionend="onEnd" :type="iconType" :size="size" :color="color"></uni-icons>
</template>
<script>
<template>
<uni-icons :id="elId" class='load-ani' :style="aniStyle" @transitionend="onEnd" :type="iconType" :size="size" :color="color"></uni-icons>
</template>
<script>
export default {
name:'icon',
props: {
iconType: {
type: String,
default: 'loop'
},
size: {
type: Number,
default: 0
},
color: {
type: String,
default: '#333'
}
},
data() {
const elId = `Uni_${(Math.random() * 10e5).toInt().toString(36)}`
return {
elId: elId,
element: null as UniElement | null,
times: 0,
aniStyle: '',
deg: 3600000
}
},
created() {
this.times = 0
// 需要延迟一些时间,否则动画不生效
setTimeout(() => {
this.aniStyle = 'transform:rotate(1deg);'
}, 300)
},
mounted() {
this.element = uni.getElementById(this.elId as string)
},
methods: {
onEnd() {
// 因为循环角度是不断增加,在增加10次以后需要重置,防止无限增加下去
if (this.times == 10) {
this.element!.style.setProperty('transform', 'rotate(0deg)')
this.element!.style.setProperty('transition-duration', '1')
this.times = 0
return
}
this.times = this.times + 1
const rotate = this.times * 360
this.element!.style.setProperty('transform', 'rotate(' + rotate + 'deg)')
this.element!.style.setProperty('transition-duration', '1000')
}
}
}
</script>
<style>
.load-ani {
transition-property: transform;
transition-duration: 0.1s;
transition-timing-function: linear;
transform: rotate(0deg);
}
name:'icon',
props: {
iconType: {
type: String,
default: 'loop'
},
size: {
type: Number,
default: 0
},
color: {
type: String,
default: '#333'
}
},
data() {
const elId = `Uni_${(Math.random() * 10e5).toInt().toString(36)}`
return {
elId: elId,
element: null as UniElement | null,
times: 0,
aniStyle: '',
deg: 3600000
}
},
created() {
this.times = 0
// 需要延迟一些时间,否则动画不生效
setTimeout(() => {
this.aniStyle = 'transform:rotate(1deg);'
}, 300)
},
mounted() {
this.element = uni.getElementById(this.elId as string)
},
methods: {
onEnd() {
// 因为循环角度是不断增加,在增加10次以后需要重置,防止无限增加下去
if (this.times == 10) {
this.element!.style.setProperty('transform', 'rotate(0deg)')
this.element!.style.setProperty('transition-duration', '1')
this.times = 0
return
}
this.times = this.times + 1
const rotate = this.times * 360
this.element!.style.setProperty('transform', 'rotate(' + rotate + 'deg)')
this.element!.style.setProperty('transition-duration', '1000')
}
}
}
</script>
<style>
.load-ani {
transition-property: transform;
transition-duration: 0.1s;
transition-timing-function: linear;
transform: rotate(0deg);
}
</style>
<template>
<!-- 如果没有插槽,则使用 load-inline 样式 -->
<view class="uni-loading-main" :class="{'load-inline':$slots['default'] == null}">
<template v-if="loading">
<slot></slot>
<template v-if="$slots['default'] == null">
<Circle :speed="16" :size="loadWidth" :color="color"></Circle>
<text v-if="text" class="inline-text" :style=" { color: color }">{{text}}</text>
</template>
<template v-else>
<view class="uni-loading-mask" :style="{backgroundColor:background}">
<Circle :speed="16" :size="loadWidth" :color="color"></Circle>
<text v-if="text" class="block-text" :style=" { color: color }">{{text}}</text>
</view>
</template>
</template>
<template v-else>
<slot></slot>
</template>
</view>
</template>
<script>
<template>
<!-- 如果没有插槽,则使用 load-inline 样式 -->
<view class="uni-loading-main" :class="{'load-inline':$slots['default'] == null}">
<template v-if="loading">
<slot></slot>
<template v-if="$slots['default'] == null">
<Circle :speed="16" :size="loadWidth" :color="color"></Circle>
<text v-if="text" class="inline-text" :style=" { color: color }">{{text}}</text>
</template>
<template v-else>
<view class="uni-loading-mask" :style="{backgroundColor:background}">
<Circle :speed="16" :size="loadWidth" :color="color"></Circle>
<text v-if="text" class="block-text" :style=" { color: color }">{{text}}</text>
</view>
</template>
</template>
<template v-else>
<slot></slot>
</template>
</view>
</template>
<script>
import Circle from './circle.uvue'
// TODO 性能问题,其他类型暂时不对外开放
// import Icon from './icon.uvue'
// import UniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.uvue'
// import { img_load_base } from './load-img.uts'
/**
* Loading-x 加载动画
* @description 用于数据加载场景,使用loading等待数据返回
* @tutorial https://ext.dcloud.net.cn/plugin?name=uni-loading-x
* @property {Boolean} loading 是否显示加载动画,默认:true
* @property {String} type = [snow|circle|icon] 加载图标显示,默认:circle
* @value snow 显示雪花加载动画,性能问题暂时不支持
* @value circle 显示圆形加载动画
* @value icon 自定义图标 ,暂时不支持
* @property {String} background 加载遮罩颜色,支持 rgba 色值,默认:rgba(255,255,255,0.6)
* @property {String} color 加载图标以及加载文字颜色,默认:#333333
* @property {String} size 加载图标大小,默认:20
* @property {String} text 加载文本,默认:不显示
* @property {String} iconType 自定义图标类型,参考 uni-icons ,当前版本暂不支持
*/
export default {
name: "uni-loading",
components: { Circle },
props: {
loading: {
type: Boolean,
default: true,
},
type: {
type: String,
default: ''
},
iconType: {
type: String,
default: 'gear-filled'
},
size: {
type: Number,
default: 0
},
text: {
type: String,
default: ''
},
background: {
type: String,
default: 'rgba(255,255,255,0.6)'
},
color: {
type: String,
default: '#333'
}
},
data() {
return {};
},
computed: {
loadWidth() : number {
let width = this.size
if (width == 0) {
return 20
}
return width
},
styles() : string {
return `width:${this.loadWidth}px;height:${this.loadWidth}px;`
}
},
created() {},
methods: {}
}
</script>
<style scoped>
.uni-loading-main {
position: relative;
}
.uni-loading-main.load-inline {
display: flex;
flex-direction: row;
align-items: center;
}
.block-text {
margin-top: 8px;
font-size: 14px;
}
.inline-text {
margin-left: 8px;
font-size: 14px;
}
.uni-loading-mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
}
.uni-loading-mask {
background-color: rgba(0, 0, 0, 0.3);
z-index: 2;
}
.uni-load {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.load-text {
font-size: 14px;
color: #fff;
margin-top: 12px;
}
.uni-load .image,
.load-image {
width: 100%;
height: 100%;
}
.load-ani {
transition-property: transform;
transition-duration: 0.1s;
transition-timing-function: linear;
transform: rotate(0deg);
}
// TODO 性能问题,其他类型暂时不对外开放
// import Icon from './icon.uvue'
// import UniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.uvue'
// import { img_load_base } from './load-img.uts'
/**
* Loading-x 加载动画
* @description 用于数据加载场景,使用loading等待数据返回
* @tutorial https://ext.dcloud.net.cn/plugin?name=uni-loading-x
* @property {Boolean} loading 是否显示加载动画,默认:true
* @property {String} type = [snow|circle|icon] 加载图标显示,默认:circle
* @value snow 显示雪花加载动画,性能问题暂时不支持
* @value circle 显示圆形加载动画
* @value icon 自定义图标 ,暂时不支持
* @property {String} background 加载遮罩颜色,支持 rgba 色值,默认:rgba(255,255,255,0.6)
* @property {String} color 加载图标以及加载文字颜色,默认:#333333
* @property {String} size 加载图标大小,默认:20
* @property {String} text 加载文本,默认:不显示
* @property {String} iconType 自定义图标类型,参考 uni-icons ,当前版本暂不支持
*/
export default {
name: "uni-loading",
components: { Circle },
props: {
loading: {
type: Boolean,
default: true,
},
type: {
type: String,
default: ''
},
iconType: {
type: String,
default: 'gear-filled'
},
size: {
type: Number,
default: 0
},
text: {
type: String,
default: ''
},
background: {
type: String,
default: 'rgba(255,255,255,0.6)'
},
color: {
type: String,
default: '#333'
}
},
data() {
return {};
},
computed: {
loadWidth() : number {
let width = this.size
if (width == 0) {
return 20
}
return width
},
styles() : string {
return `width:${this.loadWidth}px;height:${this.loadWidth}px;`
}
},
created() {},
methods: {}
}
</script>
<style scoped>
.uni-loading-main {
position: relative;
}
.uni-loading-main.load-inline {
display: flex;
flex-direction: row;
align-items: center;
}
.block-text {
margin-top: 8px;
font-size: 14px;
}
.inline-text {
margin-left: 8px;
font-size: 14px;
}
.uni-loading-mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
justify-content: center;
}
.uni-loading-mask {
background-color: rgba(0, 0, 0, 0.3);
z-index: 2;
}
.uni-load {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.load-text {
font-size: 14px;
color: #fff;
margin-top: 12px;
}
.uni-load .image,
.load-image {
width: 100%;
height: 100%;
}
.load-ani {
transition-property: transform;
transition-duration: 0.1s;
transition-timing-function: linear;
transform: rotate(0deg);
}
</style>
/**
* hex颜色转rgba
*/
export const hexToRgba = (hex : string, alpha : number) : string => {
// 去除 # 符号(如果有的话)
hex = hex.replace('#', '');
let hexArray = hex.split('');
// 检查颜色值长度,如果不符合预期则返回默认值或者抛出错误
if (hexArray.length != 3 && hexArray.length != 6) {
// 返回默认值或者抛出错误,这里使用默认值为黑色
return 'rgba(0,0,0,1)';
// 或者抛出错误
// throw new Error('Invalid hex color value');
}
let extendedHex : string[] = [];
if (hex.length == 3) {
for (let i = 0; i < hexArray.length; i++) {
extendedHex.push(hexArray[i]);
extendedHex.push(hexArray[i]);
}
hexArray = extendedHex;
}
hex = ''
for (let h = 0; h < hexArray.length; h++) {
hex += hexArray[h]
}
// // 拆分颜色值为 R、G、B
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
// // 返回 rgba 值
return `rgba(${r},${g},${b},${alpha})`;
}
export const easeInOutCubic = (t : number) : number => {
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
/**
* hex颜色转rgba
*/
export const hexToRgba = (hex : string, alpha : number) : string => {
// 去除 # 符号(如果有的话)
hex = hex.replace('#', '');
let hexArray = hex.split('');
// 检查颜色值长度,如果不符合预期则返回默认值或者抛出错误
if (hexArray.length != 3 && hexArray.length != 6) {
// 返回默认值或者抛出错误,这里使用默认值为黑色
return 'rgba(0,0,0,1)';
// 或者抛出错误
// throw new Error('Invalid hex color value');
}
let extendedHex : string[] = [];
if (hex.length == 3) {
for (let i = 0; i < hexArray.length; i++) {
extendedHex.push(hexArray[i]);
extendedHex.push(hexArray[i]);
}
hexArray = extendedHex;
}
hex = ''
for (let h = 0; h < hexArray.length; h++) {
hex += hexArray[h]
}
// // 拆分颜色值为 R、G、B
const r = parseInt(hex.substring(0, 2), 16);
const g = parseInt(hex.substring(2, 4), 16);
const b = parseInt(hex.substring(4, 6), 16);
// // 返回 rgba 值
return `rgba(${r},${g},${b},${alpha})`;
}
export const easeInOutCubic = (t : number) : number => {
return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
}
{
"id": "uni-loading",
"displayName": "uni-loading",
"version": "1.0.4",
"description": "加载动画组件多用在页面内数据加载时,提供一个loading动画,列表的上拉加载,下拉刷新等都需要加载动画",
"keywords": [
"loading",
"加载动画",
"上拉刷新",
"下拉加载"
],
"repository": "",
"engines": {
"HBuilderX": "^3.97"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "y"
},
"client": {
"Vue": {
"vue2": "n",
"vue3": "y"
},
"App": {
"app-vue": "n",
"app-nvue": "n",
"app-uvue": "y"
},
"H5-mobile": {
"Safari": "n",
"Android Browser": "n",
"微信浏览器(Android)": "n",
"QQ浏览器(Android)": "n"
},
"H5-pc": {
"Chrome": "n",
"IE": "n",
"Edge": "n",
"Firefox": "n",
"Safari": "n"
},
"小程序": {
"微信": "n",
"阿里": "n",
"百度": "n",
"字节跳动": "n",
"QQ": "n",
"钉钉": "n",
"快手": "n",
"飞书": "n",
"京东": "n"
},
"快应用": {
"华为": "n",
"联盟": "n"
}
}
}
}
{
"id": "uni-loading",
"displayName": "uni-loading",
"version": "1.0.5",
"description": "加载动画组件多用在页面内数据加载时,提供一个loading动画,列表的上拉加载,下拉刷新等都需要加载动画",
"keywords": [
"loading",
"加载动画",
"上拉刷新",
"下拉加载"
],
"repository": "",
"engines": {
"HBuilderX": "^3.97"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uni-icons"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y",
"alipay": "y"
},
"client": {
"Vue": {
"vue2": "n",
"vue3": "y"
},
"App": {
"app-vue": "n",
"app-nvue": "n",
"app-uvue": "y"
},
"H5-mobile": {
"Safari": "n",
"Android Browser": "n",
"微信浏览器(Android)": "n",
"QQ浏览器(Android)": "n"
},
"H5-pc": {
"Chrome": "n",
"IE": "n",
"Edge": "n",
"Firefox": "n",
"Safari": "n"
},
"小程序": {
"微信": "n",
"阿里": "n",
"百度": "n",
"字节跳动": "n",
"QQ": "n",
"钉钉": "n",
"快手": "n",
"飞书": "n",
"京东": "n"
},
"快应用": {
"华为": "n",
"联盟": "n"
}
}
}
}
}
\ No newline at end of file
......@@ -19,7 +19,7 @@
<!-- 修改加载图标大小 -->
<uni-loading :size="30"></uni-loading>
<!-- 修改加载图标类型 : 当前只支持 circle-->
<uni-loading type="circle"></uni-loading>
<uni-loading type="circle"></uni-loading>
```
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册