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
| <template>
| <view class="animation-words-container">
| <view class="word-items">
| <view v-for="(word,index) of words" :key="index" class="word-item"
| :style="{'top': 20 + index*(38+10) + 'rpx','right':-(400 + index*(80) + (word.randomnum||0))%750 + 'rpx'}">
| {{word.createdName || '佚名'}}召唤“{{word.content || '-'}}”
| </view>
| </view>
| </view>
| </template>
|
| <script>
| export default {
| name: "animation-words",
| data() {
| return {
|
| };
| },
| props: {
| words: {
| type: Array,
| default () {
| return []
| }
| }
| }
| }
| </script>
|
| <style lang="scss" scoped>
| .animation-words-container {
| position: absolute;
| left: 0;
| right: 0;
| top: 0;
| // min-height: 20;
| max-height: 470rpx;
|
| .word-items {
| position: relative;
|
| // overflow: hidden;
| // display: flex;
| // flex-wrap: nowrap;
| .word-item {
| position: absolute;
| right: 0rpx;
| top: 0rpx;
| // width: 308rpx;
| height: 38rpx;
| padding-left: 16rpx;
| padding-right: 16rpx;
| line-height: 38rpx;
| color: #fff;
| font-size: 18rpx;
| background: rgba(0, 0, 0, 0.32);
| border-radius: 20rpx;
| animation: rowScrollTest 10s linear infinite;
| }
| }
|
| @keyframes rowScrollTest {
| 0% {
| /* 为0时，ios会闪动 */
| transform: translateX(200rpx);
| }
|
| 100% {
| transform: translateX(-1500rpx); // 单个数组所渲染的dom长度
| }
| }
| }
| </style>
|
|
