vue实现文本上下循环滚动_vue上下滚动公告样式

前言

页面上有两块公告，需要循环滚动，最初使用animation实现了，但如果两块公告的条数不一致的话，就会导致两块公告滚动的快慢不同，由此需要换种方式实现，使两块公告始终以同样的快慢节奏滚动。

一、第一种方式：animation实现（存在两块公告滚动的快慢不同的问题）

<!-- 公告1 -->
<div class="report-text>
	<!-- 大于3条 -->
	<ul v-if="list.length > 3" class="list">
        <li v-for="(item, index) in list" :key="'list'+index">{{item.name}}</li>
    </ul>
    <!-- 小于于3条 -->
    <ul v-else>
       <li v-for="(item, index) in list" :key="'list'+index">{{item.name}}</li>
    </ul>
</div>
<!-- 公告2-->
<div class="report-text>
	<!-- 大于3条 -->
	<ul v-if="list2.length > 3" class="list2">
        <li v-for="(item, index) in list2" :key="'list2'+index">{{item.name}}</li>
    </ul>
    <!-- 小于于3条 -->
    <ul v-else>
       <li v-for="(item, index) in list2" :key="'list2'+index">{{item.name}}</li>
    </ul>
</div>

// data
list: [{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'}]
list2: [{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'}]

// 样式
.report-text{
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #606266;
  height: 125px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  ul {
    animation: scroll 10s linear infinite; /* 使用动画来实现滚动效果 */
    li {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px #eee dashed;
    }
  }
}
@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); } /* 在动画中实现平滑的垂直滚动效果 */
}
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

二、第二种方式：采用js的方式实现

采用js改变循环体的top值，循环完再将top值重置为0

<!-- 公告1 -->
<div class="report-text>
	<!-- 大于3条 -->
	<ul v-if="list.length > 3" class="list">
        <li v-for="(item, index) in list" :key="'list'+index">{{item.name}}</li>
    </ul>
    <!-- 小于于3条 -->
    <ul v-else>
       <li v-for="(item, index) in list" :key="'list'+index">{{item.name}}</li>
    </ul>
</div>
<!-- 公告2-->
<div class="report-text>
	<!-- 大于3条 -->
	<ul v-if="list2.length > 3" class="list2">
        <li v-for="(item, index) in list2" :key="'list2'+index">{{item.name}}</li>
    </ul>
    <!-- 小于于3条 -->
    <ul v-else>
       <li v-for="(item, index) in list2" :key="'list2'+index">{{item.name}}</li>
    </ul>
</div>

// data
list: [{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'}],
list2: [{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'},{name: '公告标题'}],
// 定时器
timer: null,
timer2: null,
// 步骤
step: 0,
step2: 0

/** 方法 */
// 清除定时器
clearTimer(timeName) {
  clearInterval(this[timeName])
},
// className循环体样式类，timeName循环体定时器，stepName移动px的变量名
scroll(className, timeName, stepName) {
  let box = document.querySelector(className)
  let height = box.clientHeight
  let pos = height - 125  // 125为循环体的高度
  this.clearTimer(timeName)
  this[timeName] = setInterval(() => {
    if (this[stepName] < pos) {
      box.style.top = -this[stepName] + 'px'
      this[stepName] += 1  // 1为每次移动的px值
    } else if (this[stepName] === pos) {
      this[stepName] = 0
    }
  }, 50) // 50为移动的速度
},

// 获取公告1的数据
getList(){
  if(this.list.length > 3){
    // 拼接两次，使得循环连贯起来
  	this.list = [...this.list, ...this.list]
  	this.$nextTick(() => {
       this.scroll('.list', 'timer', 'step')
    })
  }else{
    this.list = data || []
  }
}

// 获取公告2的数据
getList2(){
  if(this.list2.length > 3){
    // 拼接两次，使得循环连贯起来
  	this.list2 = [...this.list2, ...this.list2]
  	this.$nextTick(() => {
       this.scroll('.list2', 'timer2', 'step2')
    })
  }else{
    this.list2 = data || []
  }
}

// 调用
created() {
	this.getList()
	this.getList2()
}

// 样式
.report-text{
  position: relative;
  vertical-align: middle;
  display: inline-block;
  color: #606266;
  height: 125px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  ul {
    li {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px #eee dashed;
    }
  }
}
.list, .list2{
  position: absolute;
}
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

三、HTML/CSS概述

HTML（超文本标记语言）和CSS（级联样式表）是web开发中使用的两种基本技术。它们协同工作来构建和设计网页样式。
HTML用于创建网页的结构和内容。它由一系列元素组成，如标题、段落、图像、链接和列表等。这些元素由包含在尖括号中的标记定义。例如，要创建标题，可以使用h1标记；要创建段落，可以使用p标记。
CSS用于对HTML元素进行样式和布局。它允许您控制元素的外观，包括它们的颜色、字体、大小、边距和位置。CSS的工作原理是选择特定的HTML元素并对其应用样式。可以使用选择器来定义样式，例如元素选择器（选择特定HTML元素的所有实例）或类选择器（选择具有特定类属性的元素）。
HTML和CSS通过将HTML文件链接到CSS文件来协同工作。HTML文件包含网页的结构和内容，而CSS文件包含要应用于该结构和内容的样式。CSS文件可以使用HTML的＜head＞部分中的＜link＞标记链接到HTML文件。

四、vue概述

Vue.js是一个轻量级的JavaScript框架，用于构建可复用的用户界面组件。它是一个MVVM（Model-View-ViewModel）框架，用于构建单页面应用程序。

Vue.js具有以下特点和优势：

1. 简单易学：Vue.js采用了类似于HTML的模板语法，使开发者能够更轻松地理解和编写代码。

2. 轻量级高效：Vue.js的文件大小很小，因此加载速度快，页面响应速度高。

3. 双向数据绑定：Vue.js使用了双向数据绑定机制，当数据发生变化时，视图会自动更新。

4. 组件化开发：Vue.js鼓励组件化开发，将复杂的应用程序拆分成小的、可复用的组件。

5. 容易集成：Vue.js可以很容易地集成到现有的项目中，也可以与其他库和框架（如React和Angular）共同使用。

6. 良好的生态系统：Vue.js拥有强大的生态系统，有许多第三方插件和库可供使用，以扩展其功能。

Vue.js的缺点包括：

1. 生态系统相对较小：相比于一些更成熟的框架如React和Angular，Vue.js的生态系统相对较小，因此在某些方面可能会缺乏一些成熟的解决方案。

2. 关注点分离较弱：与一些更严格的MVC框架相比，Vue.js的关注点分离较弱，因此在大型应用程序中可能需要更多的注意力来确保代码的可维护性。

总的来说，Vue.js是一个简单、高效、灵活的JavaScript框架，适用于构建各种规模的应用程序。它的轻量级和易学性使其成为许多开发者的首选，然而在一些特定的场景和需求下，可能需要考虑其他框架的使用。

相关文章

el-tabs事件绑定（Element UI）
Element UI resetFields与clearValidate方法
Vue resize监听窗口变化
vue监听滚动事件 实现某元素随着滚动条滚动固定距离顶部的某个位置（元素的top值实时变化）
Element-UI 日期选择器-时间范围控制
vue iframe 宽高自适应
上下滚动