newssection.vue
4.03 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
106
107
108
109
110
111
112
113
114
<template>
<div >
<titlesection title="消息"></titlesection>
<div class="nwwest-roll flexfm news-wrap" id="nwwest-roll">
<ul id="roll-ul">
<li v-for="item in list" ref="rollul" :class="{anim:animate==true}">
<div class="noticetype1" v-if="item.type===1"></div>
<div class="noticetype2" v-else-if="item.type===2"></div>
<div class="errortype1" v-else-if="item.type===3"></div>
<div class="errortype2" v-else></div>
<div class="text" :title="item.site">{{item.site}}</div>
<div class="time">{{item.gsmc}}</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import titlesection from '../components/titlesection'
export default {
name: 'newssection',
components: {
titlesection
},
data() {
return {
animate: true,
list: [
{"type":1, "name": "于先生1", "site": "北京门头沟区1北京门头沟区1北京门头沟区1", "gsmc": "10-02" },
{"type":2, "name": "于先生2", "site": "北京门头沟区2", "gsmc": "10-02" },
{"type":3, "name": "于先生3", "site": "北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3", "gsmc": "10-02" },
{"type":4, "name": "于先生4", "site": "北京门头沟区4", "gsmc": "10-02" },
{"type":1, "name": "于先生5", "site": "北京门头沟区5", "gsmc": "10-02" },
{"type":2, "name": "于先生6", "site": "北京门头北京门头沟区6北京门头沟区6北京门头沟区6北京门头沟区6沟区6", "gsmc": "10-02" },
{"type":3, "name": "于先生7", "site": "北京门头沟区7", "gsmc": "10-02" },
{"type":4, "name": "于先生8", "site": "北京门头沟区8", "gsmc": "10-02" },
{"type":1, "name": "于先生9", "site": "北京门头北京门头沟区9北京门头沟区9北京门头沟区9沟区9", "gsmc": "10-02" },
{"type":2, "name": "于先生10", "site": "北京门头沟区10", "gsmc": "10-02" },
{"type":3, "name": "于先生11", "site": "北京门北京门头沟区11北京门头沟区11北京门头沟区11头沟区11", "gsmc": "10-02" }
]
}
},
created() {
setInterval(this.scroll, 2000)
},
methods: {
scroll() {
let con1 = this.$refs.rollul;
con1[0].style.marginTop = '30px';
this.animate = !this.animate;
var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
setTimeout(function () {
that.list.push(that.list[0]);
that.list.shift();
con1[0].style.marginTop = '0px';
that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
}, 0)
}
}
}
</script>
<style lang="scss" scoped>
@mixin newsType($img){
margin-left: 23px;
margin-right: 23px;
width: 26px;
height: 26px;
background-image: url($img);
background-repeat:no-repeat ;
}
.nwwest-roll {
width: 100%;
height: 210px;
overflow: hidden;
transition: all 0.5s;
li{
height: 26px;
line-height: 26px;
font-size: 12px;
color: #fff;
display: flex;
background:rgba(255,255,255,.1);
margin-bottom: 10px;
.noticetype1{
@include newsType("../assets/img/noticetype1.png");
}
.noticetype2{
@include newsType("../assets/img/noticetype2.png");
}
.errortype1{
@include newsType("../assets/img/errortype1.png");
}
.errortype2{
@include newsType("../assets/img/errortype1.png");
}
.text{
width:calc(100% - 100px);
overflow:hidden;
text-overflow:ellipsis;
}
.time{
padding-left: 23px;
width: 65px;
}
}
}
.anim {
transition: all 0.5s;
}
</style>