wedux-ui 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -4
- package/miniprogram_dist/components/marquee/marquee.js +96 -0
- package/miniprogram_dist/components/marquee/marquee.json +4 -0
- package/miniprogram_dist/components/marquee/marquee.scss +34 -0
- package/miniprogram_dist/components/marquee/marquee.wxml +16 -0
- package/miniprogram_dist/styles/tokens.scss +5 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,12 +18,14 @@ npm install wedux-ui
|
|
|
18
18
|
|
|
19
19
|
安装后在**微信开发者工具**中点击 **工具 → 构建 npm**，等待构建完成。
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
> **注意**：本组件库使用 SCSS 编写，**微信开发者工具不会自动编译 SCSS**，需在 `project.config.json` 中添加 `"useCompilerPlugins": ["sass"]`。
|
|
22
|
+
|
|
23
|
+
在项目全局样式文件 `app.scss` 中引入：
|
|
22
24
|
|
|
23
25
|
```scss
|
|
24
|
-
@import '
|
|
25
|
-
@import '
|
|
26
|
-
@import '
|
|
26
|
+
@import './miniprogram_dist/styles/iconfont.scss';
|
|
27
|
+
@import './miniprogram_dist/styles/tokens.scss';
|
|
28
|
+
@import './miniprogram_dist/styles/theme.scss';
|
|
27
29
|
```
|
|
28
30
|
|
|
29
31
|
## 快速上手
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
Component({
|
|
2
|
+
properties: {
|
|
3
|
+
text: {
|
|
4
|
+
type: String,
|
|
5
|
+
value: '',
|
|
6
|
+
},
|
|
7
|
+
speed: {
|
|
8
|
+
type: Number,
|
|
9
|
+
value: 48,
|
|
10
|
+
},
|
|
11
|
+
autoFill: {
|
|
12
|
+
type: Boolean,
|
|
13
|
+
value: false,
|
|
14
|
+
},
|
|
15
|
+
pauseOnTap: {
|
|
16
|
+
type: Boolean,
|
|
17
|
+
value: false,
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
|
|
21
|
+
data: {
|
|
22
|
+
_items: [0],
|
|
23
|
+
_duration: 2,
|
|
24
|
+
_play: 'paused',
|
|
25
|
+
_containerStyle: '',
|
|
26
|
+
},
|
|
27
|
+
|
|
28
|
+
observers: {
|
|
29
|
+
'text, speed, autoFill': function () {
|
|
30
|
+
if (!this._ready) return;
|
|
31
|
+
if (!this.data.text) return;
|
|
32
|
+
wx.nextTick(() => {
|
|
33
|
+
this._measure();
|
|
34
|
+
});
|
|
35
|
+
},
|
|
36
|
+
'_duration, _play': function () {
|
|
37
|
+
this._applyStyle();
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
|
|
41
|
+
lifetimes: {
|
|
42
|
+
ready() {
|
|
43
|
+
this._ready = true;
|
|
44
|
+
if (this.data.text) {
|
|
45
|
+
this._measure();
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
|
|
50
|
+
methods: {
|
|
51
|
+
_measure() {
|
|
52
|
+
const query = this.createSelectorQuery();
|
|
53
|
+
query.select('.w-marquee').boundingClientRect();
|
|
54
|
+
query.select('.w-marquee__group').boundingClientRect();
|
|
55
|
+
query.exec((res) => {
|
|
56
|
+
if (!res[0] || !res[1]) return;
|
|
57
|
+
const containerWidth = res[0].width;
|
|
58
|
+
const groupWidth = res[1].width;
|
|
59
|
+
if (groupWidth <= 0) return;
|
|
60
|
+
|
|
61
|
+
if (this.data.autoFill && containerWidth > 0) {
|
|
62
|
+
const repeatCount = Math.ceil(containerWidth / groupWidth) + 1;
|
|
63
|
+
this.setData({ _items: Array.from({ length: repeatCount }, (_, i) => i) });
|
|
64
|
+
wx.nextTick(() => {
|
|
65
|
+
const q2 = this.createSelectorQuery();
|
|
66
|
+
q2.select('.w-marquee__group').boundingClientRect();
|
|
67
|
+
q2.exec((res2) => {
|
|
68
|
+
if (!res2[0] || res2[0].width <= 0) return;
|
|
69
|
+
this._setDuration(res2[0].width);
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
} else {
|
|
73
|
+
this._setDuration(groupWidth);
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
},
|
|
77
|
+
|
|
78
|
+
_setDuration(groupWidth) {
|
|
79
|
+
const duration = groupWidth / this.data.speed;
|
|
80
|
+
this.setData({ _duration: duration, _play: 'running' });
|
|
81
|
+
},
|
|
82
|
+
|
|
83
|
+
_applyStyle() {
|
|
84
|
+
const { _duration, _play } = this.data;
|
|
85
|
+
this.setData({
|
|
86
|
+
_containerStyle: `--w-marquee-duration: ${_duration}s; --w-marquee-play: ${_play}`,
|
|
87
|
+
});
|
|
88
|
+
},
|
|
89
|
+
|
|
90
|
+
onTap() {
|
|
91
|
+
if (!this.data.pauseOnTap) return;
|
|
92
|
+
const play = this.data._play === 'running' ? 'paused' : 'running';
|
|
93
|
+
this.setData({ _play: play });
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
});
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.w-marquee {
|
|
2
|
+
overflow: hidden;
|
|
3
|
+
display: flex;
|
|
4
|
+
|
|
5
|
+
&--hidden {
|
|
6
|
+
display: none;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
&__group {
|
|
10
|
+
flex: 0 0 auto;
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: row;
|
|
13
|
+
align-items: center;
|
|
14
|
+
animation: w-marquee-scroll var(--w-marquee-duration, 2s) linear infinite;
|
|
15
|
+
animation-play-state: var(--w-marquee-play, running);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&__item {
|
|
19
|
+
flex-shrink: 0;
|
|
20
|
+
white-space: nowrap;
|
|
21
|
+
font-size: var(--w-marquee-font-size);
|
|
22
|
+
color: var(--w-marquee-color);
|
|
23
|
+
padding-right: var(--w-marquee-gap);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@keyframes w-marquee-scroll {
|
|
28
|
+
from {
|
|
29
|
+
transform: translateX(0);
|
|
30
|
+
}
|
|
31
|
+
to {
|
|
32
|
+
transform: translateX(-100%);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<view
|
|
2
|
+
class="w-marquee {{!text ? 'w-marquee--hidden' : ''}}"
|
|
3
|
+
style="{{_containerStyle}}"
|
|
4
|
+
bindtap="onTap"
|
|
5
|
+
>
|
|
6
|
+
<view class="w-marquee__group">
|
|
7
|
+
<block wx:for="{{_items}}" wx:key="*this">
|
|
8
|
+
<text class="w-marquee__item">{{text}}</text>
|
|
9
|
+
</block>
|
|
10
|
+
</view>
|
|
11
|
+
<view class="w-marquee__group">
|
|
12
|
+
<block wx:for="{{_items}}" wx:key="*this">
|
|
13
|
+
<text class="w-marquee__item">{{text}}</text>
|
|
14
|
+
</block>
|
|
15
|
+
</view>
|
|
16
|
+
</view>
|
|
@@ -289,4 +289,9 @@ page {
|
|
|
289
289
|
/* Avatar */
|
|
290
290
|
--w-avatar-radius: var(--radius-sm);
|
|
291
291
|
--w-avatar-bg: var(--color-avatar-bg);
|
|
292
|
+
|
|
293
|
+
/* Marquee */
|
|
294
|
+
--w-marquee-gap: 32rpx;
|
|
295
|
+
--w-marquee-font-size: var(--font-size-md);
|
|
296
|
+
--w-marquee-color: var(--color-text-primary);
|
|
292
297
|
}
|