Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
hello uni-app x
提交
2b8390d8
H
hello uni-app x
项目概览
DCloud
/
hello uni-app x
通知
5995
Star
90
Fork
162
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
18
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
18
Issue
18
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
2b8390d8
编写于
2月 28, 2024
作者:
M
mehaotian
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update: uni-loading 中 cricle 组件与内置组件名冲突
上级
37c3908b
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
7 addition
and
94 deletion
+7
-94
uni_modules/uni-loading/changelog.md
uni_modules/uni-loading/changelog.md
+2
-0
uni_modules/uni-loading/components/uni-loading/loading-circle.uvue
...es/uni-loading/components/uni-loading/loading-circle.uvue
+0
-0
uni_modules/uni-loading/components/uni-loading/snow.uvue
uni_modules/uni-loading/components/uni-loading/snow.uvue
+0
-89
uni_modules/uni-loading/components/uni-loading/uni-loading.uvue
...dules/uni-loading/components/uni-loading/uni-loading.uvue
+4
-4
uni_modules/uni-loading/package.json
uni_modules/uni-loading/package.json
+1
-1
未找到文件。
uni_modules/uni-loading/changelog.md
浏览文件 @
2b8390d8
## 1.0.6(2024-02-28)
-
更新 Circle 组件名称,防止与内置组件名冲突
## 1.0.5(2024-01-12)
-
优化 删除组件内无用日志输出
## 1.0.4(2024-01-10)
...
...
uni_modules/uni-loading/components/uni-loading/circle.uvue
→
uni_modules/uni-loading/components/uni-loading/
loading-
circle.uvue
浏览文件 @
2b8390d8
文件已移动
uni_modules/uni-loading/components/uni-loading/snow.uvue
已删除
100644 → 0
浏览文件 @
37c3908b
<template>
<view :ref="elId" class="block" :style="{width:size+'px',height:size+'px'}"></view>
</template>
<script>
import { hexToRgba } from './util'
export default {
name: "uni-snow",
props: {
speed: {
type: Number,
default: 16,
},
size: {
type: Number,
default: 20,
},
color: {
type: String,
default: '',
}
},
data() {
const elId = `Uni_${(Math.random() * 10e5).toInt().toString(36)}`
return {
elId: elId,
timer: 0,
};
},
mounted() {
const refs = this.$refs[this.elId] as UniElement
let ctx = refs.getDrawableContext()!
this.spinner(ctx)
},
unmounted() {
clearInterval(this.timer)
},
methods: {
spinner(ctx : DrawableContext) {
const steps = 12;
let step = 0;
const width = this.size;
const lineWidth = width / 12;
// 线长度和距离圆心距离
const length = width / 4 - lineWidth;
const offset = width / 4;
function draw() {
ctx.reset();
for (let i = 0; i < steps; i++) {
const stepAngle = 360 / steps;
const angle = stepAngle * i;
// 计算透明度
const opacity = ((steps - (step % steps)) * stepAngle + angle) % 360 + 30;
// 计算正余弦值
const sin = Math.sin((angle / 180) * Math.PI);
const cos = Math.cos((angle / 180) * Math.PI);
// 开始绘制线条
ctx.lineWidth = lineWidth;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(width / 2 + offset * cos, width / 2 + offset * sin);
ctx.lineTo(
width / 2 + (offset + length) * cos,
width / 2 + (offset + length) * sin
);
// 获取填充颜色
const fillColor = this.color !== '' ? this.color : '#333333';
// 转换透明度并设置颜色
ctx.strokeStyle = hexToRgba(fillColor, Math.round((opacity / 360) * 255));
ctx.stroke();
}
step += 1;
ctx.update();
}
draw()
// 每隔一段时间执行绘制函数
this.timer = setInterval(() => draw(), this.speed + 76);
}
}
}
</script>
<style scoped>
.block {
width: 50px;
height: 50px;
}
</style>
uni_modules/uni-loading/components/uni-loading/uni-loading.uvue
浏览文件 @
2b8390d8
...
...
@@ -4,12 +4,12 @@
<template v-if="loading">
<slot></slot>
<template v-if="$slots['default'] == null">
<
Circle :speed="16" :size="loadWidth" :color="color"></
Circle>
<
LoadingCircle :speed="16" :size="loadWidth" :color="color"></Loading
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>
<
LoadingCircle :speed="16" :size="loadWidth" :color="color"></Loading
Circle>
<text v-if="text" class="block-text" :style=" { color: color }">{{text}}</text>
</view>
</template>
...
...
@@ -20,7 +20,7 @@
</view>
</template>
<script>
import
Circle from './
circle.uvue'
import
LoadingCircle from './loading-
circle.uvue'
// TODO 性能问题,其他类型暂时不对外开放
// import Icon from './icon.uvue'
// import UniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.uvue'
...
...
@@ -45,7 +45,7 @@
export default {
name: "uni-loading",
components: { Circle },
components: {
Loading
Circle },
props: {
loading: {
type: Boolean,
...
...
uni_modules/uni-loading/package.json
浏览文件 @
2b8390d8
{
"id"
:
"uni-loading"
,
"displayName"
:
"uni-loading"
,
"version"
:
"1.0.
5
"
,
"version"
:
"1.0.
6
"
,
"description"
:
"加载动画组件多用在页面内数据加载时,提供一个loading动画,列表的上拉加载,下拉刷新等都需要加载动画"
,
"keywords"
:
[
"loading"
,
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录