u-loading-icon.js
4.0 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
"use strict";
const uni_modules_uviewPlus_components_uLoadingIcon_props = require("./props.js");
const uni_modules_uviewPlus_libs_mixin_mpMixin = require("../../libs/mixin/mpMixin.js");
const uni_modules_uviewPlus_libs_mixin_mixin = require("../../libs/mixin/mixin.js");
const uni_modules_uviewPlus_libs_function_index = require("../../libs/function/index.js");
const uni_modules_uviewPlus_libs_function_colorGradient = require("../../libs/function/colorGradient.js");
const common_vendor = require("../../../../common/vendor.js");
const _sfc_main = {
name: "u-loading-icon",
mixins: [uni_modules_uviewPlus_libs_mixin_mpMixin.mpMixin, uni_modules_uviewPlus_libs_mixin_mixin.mixin, uni_modules_uviewPlus_components_uLoadingIcon_props.props],
data() {
return {
// Array.form可以通过一个伪数组对象创建指定长度的数组
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
array12: Array.from({
length: 12
}),
// 这里需要设置默认值为360,否则在安卓nvue上,会延迟一个duration周期后才执行
// 在iOS nvue上,则会一开始默认执行两个周期的动画
aniAngel: 360,
// 动画旋转角度
webviewHide: false,
// 监听webview的状态,如果隐藏了页面,则停止动画,以免性能消耗
loading: false
// 是否运行中,针对nvue使用
};
},
computed: {
// 当为circle类型时,给其另外三边设置一个更轻一些的颜色
// 之所以需要这么做的原因是,比如父组件传了color为红色,那么需要另外的三个边为浅红色
// 而不能是固定的某一个其他颜色(因为这个固定的颜色可能浅蓝,导致效果没有那么细腻良好)
otherBorderColor() {
const lightColor = uni_modules_uviewPlus_libs_function_colorGradient.colorGradient$1(this.color, "#ffffff", 100)[80];
if (this.mode === "circle") {
return this.inactiveColor ? this.inactiveColor : lightColor;
} else {
return "transparent";
}
}
},
watch: {
show(n) {
}
},
mounted() {
this.init();
},
methods: {
addUnit: uni_modules_uviewPlus_libs_function_index.addUnit,
addStyle: uni_modules_uviewPlus_libs_function_index.addStyle,
init() {
setTimeout(() => {
}, 20);
},
// 监听webview的显示与隐藏
addEventListenerToWebview() {
const pages = getCurrentPages();
const page = pages[pages.length - 1];
const currentWebview = page.$getAppWebview();
currentWebview.addEventListener("hide", () => {
this.webviewHide = true;
});
currentWebview.addEventListener("show", () => {
this.webviewHide = false;
});
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return common_vendor.e({
a: _ctx.show
}, _ctx.show ? common_vendor.e({
b: !$data.webviewHide
}, !$data.webviewHide ? common_vendor.e({
c: _ctx.mode === "spinner"
}, _ctx.mode === "spinner" ? {
d: common_vendor.f($data.array12, (item, index, i0) => {
return {
a: index
};
})
} : {}, {
e: common_vendor.n(`u-loading-icon__spinner--${_ctx.mode}`),
f: _ctx.color,
g: $options.addUnit(_ctx.size),
h: $options.addUnit(_ctx.size),
i: _ctx.color,
j: $options.otherBorderColor,
k: $options.otherBorderColor,
l: $options.otherBorderColor,
m: `${_ctx.duration}ms`,
n: _ctx.mode === "semicircle" || _ctx.mode === "circle" ? _ctx.timingFunction : ""
}) : {}, {
o: _ctx.text
}, _ctx.text ? {
p: common_vendor.t(_ctx.text),
q: $options.addUnit(_ctx.textSize),
r: _ctx.textColor
} : {}, {
s: common_vendor.s($options.addStyle(_ctx.customStyle)),
t: common_vendor.n(_ctx.vertical && "u-loading-icon--vertical")
}) : {});
}
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-2af81691"]]);
wx.createComponent(Component);