前几天有个项目需要一个文字左右滑动的效果,为了方便,于是在网上查了一下是否有相关插件,最后还是被我找到一个小插件
首先是安装插件
npm install -s vue-seamless-scroll
插件安装后,在页面中引入
import vueSeamlessScroll from 'vue-seamless-scroll'
components: { vueSeamlessScroll }
html代码
<vue-seamless-scroll :data="webList" :class-option="optionLeft" class="seamless-warp2" :style="`width: ${divWidth}px`">
<ul class="seamlessItem" :style="`width: ${divWidth}px`">
<li v-for="item in webList" v-text="item.title"></li>
</ul>
</vue-seamless-scroll>
js逻辑代码
data: {
divWidth: 0,
webList: []
}
computed: {
optionLeft () {
return {
direction: 2,
limitMoveNum: 2
}
}
},
mounted: {
this.$nextTick(() => { // 在dom渲染完后,再执行动画
this.divWidth = window.innerWidth;
this.webList = [
{
title: '由于网站升级维护,大赛网站将于10月13日-10月22日期间临时关闭。'
}, {
title: '由于网站升级维护,大赛网站将于10月13日-10月22日期间临时关闭。'
}
]
})
}
css样式
.seamless-warp2 {
overflow: hidden;
height: 25px;
width: 380px;
}
.seamlessItem {
height: 25px;
li {
float: left;
margin-right: 10px;
color: #FFFFFF;
}
}
以上是向左滚动,滚动条数2条
其他方向滚动,或参数,请参考官方文档:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default