滚动栏效果
发表于:2023-04-17 |

前言

不知道大家是否遇到过需要那种连续滚动展示的情况,如下面这个gif右侧广告展示的情况
效果图

这里基于vue实现,这个实现可以基于vue-seamless-scroll这个库

使用

安装

1
npm i vue-seamless-scroll

导入

1
import vueSeamlessScroll from "vue-seamless-scroll";

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <vueSeamlessScroll
:data="newmsg"
:class-option="optionCustomer"
class="ad_scroll"
>
<ul>
<li
v-for="item in newmsg"
:key="item.id"
:data-id="JSON.stringify(item.id)"
class="ad_item"
>
<i class="icon"></i>
<span class="ad_content">
{{ item.name }}
</span>
</li>
</ul>
</vueSeamlessScroll>

好了本篇文章就到这里,喜欢的话请支持作者

上一篇:
【每日一练】01-CSS实现3D菜单效果
下一篇:
全局注册组件