在uniapp中实现首尾相连的跑马灯效果
时间: 2023-12-06 08:02:05 浏览: 56
在uniapp中实现首尾相连的跑马灯效果,可以使用scroll-view组件实现。具体操作如下:
HTML代码:
```
<scroll-view class="marquee" :scroll-left="scrollLeft" :scroll-with-animation="true" :scroll-x="true">
<div>{{marqueeText}}</div>
<div>{{marqueeText}}</div>
<div>{{marqueeText}}</div>
<div>{{marqueeText}}</div>
</scroll-view>
```
CSS代码:
```
.marquee {
white-space: nowrap;
}
.marquee div {
display: inline-block;
padding-right: 100rpx;
}
```
JS代码:
```
export default {
data() {
return {
marqueeText: '这是跑马灯显示的内容',
scrollLeft: 0,
}
},
created() {
setInterval(() => {
this.scrollLeft -= 1;
if (this.scrollLeft < -this.marqueeText.length * 14) {
this.scrollLeft = 0;
}
}, 20);
},
}
```
解析:
- 使用scroll-view组件包裹需要滚动的内容,并设置scroll-x为true实现横向滚动。将white-space设置为nowrap实现内容在一行中不换行的效果。
- 对于每一个需要滚动的内容,使用display:inline-block,padding-right:100rpx实现每一个内容向右平移,占据与其宽度相等的空间。
- 在JS代码中,使用setInterval实现定时滚动。将scrollLeft不断减小,实现滚动效果。当scrollLeft小于内容的总长度时,将scrollLeft设置为0,实现首尾相连的效果。
这样,就可以在uniapp中实现首尾相连的跑马灯效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)