uni-app
官网地址:uni-notice-bar 组件
html + css 滚动效果
操作步骤:
1、创建html文件;
2、添加html代码架构;
3、在body标签中使用div和p标签设计一段文字;
4、添加script标签并写入css样式代码来实现文字滚动效果;
5、通过浏览器方式查看设计效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字循环滚动效果</title>
<style>
.title_bale {
width: 300px;
margin: 0 auto;
border: 1px solid #ff6700;
overflow: hidden;
}
.title {
padding-left: 20px;
font-size: 12px;
color: #000;
display: inline-block;
white-space: nowrap;
animation: 10s wordsLoop linear infinite normal;
}
@keyframes wordsLoop {
0% {
transform: translateX(200px);
-webkit-transform: translateX(200px);
}100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
@-webkit-keyframes wordsLoop {
0% {
transform: translateX(200px);
-webkit-transform: translateX(200px);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="title_bale">
<div class="title">
文字滚动的内容
</div>
<div>
</body>
</html>
跑马灯组件
<div class="marquee-wrap" ref="marquee-wrap">
<div class="scroll" ref="scroll">
<p class="marquee">{{text}}</p>
<p class="copy" ref="copy"></p>
</div>
<p class="getWidth" ref="getWidth">{{text}}</p>
</div>
export default {
name: 'marquee',
data () {
return {
timer: null,
text: ''
}
},
created () {
let timer = setTimeout(() => {
this.move()
clearTimeout(timer)
}, 1000)
},
mounted () {
for (let item of this.val) {
this.text += item
}
},
methods: {
move () {
let maxWidth = this.$refs['marquee-wrap'].clientWidth
let width = this.$refs['getWidth'].scrollWidth
if (width <= maxWidth) return
let scroll = this.$refs['scroll']
let copy = this.$refs['copy']
copy.innerText = this.text
let distance = 0
this.timer = setInterval(() => {
distance -= 1
if (-distance >= width) {
distance = 16
}
scroll.style.transform = 'translateX(' + distance + 'px)'
}, 20)
}
},
beforeDestroy () {
clearInterval(this.timer)
}
}
<style>
.marquee-wrap {
width: 100%;
overflow: hidden;
position: relative;
}
.marquee{
margin-right: 0.16rem;
}
p {
word-break:keep-all;
white-space: nowrap;
font-size: 0.28rem;
}
.scroll {
display: flex;
}
.getWidth {
word-break:keep-all;
white-space:nowrap;
position: absolute;
opacity: 0;
top: 0;
}
</style>