一,安装
npm install vue-seamless-scroll --save
二,注册使用组件
// **main.js**
// 1.全局 install
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
// 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-seamless-scroll
Vue.use(scroll,{componentName: 'scroll-seamless'})
// 2.单个.vue文件局部注册
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
components: {
vueSeamlessScroll
}
}
</script>
三、使用组件
<template>
<vue-seamless-scroll :data="listData" class="warp">
<ul class="item">
<li v-for="(item, index) in listData" :key="index">
<span class="title" v-text="item.title"></span>
<span class="date" v-text="item.date"></span>
</li>
</ul>
</vue-seamless-scroll>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
name: 'Example01Basic',
components: {
vueSeamlessScroll
},
data () {
return {
listData: [{
'title': '无缝滚动第一行无缝滚动第一行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第二行无缝滚动第二行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第三行无缝滚动第三行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第四行无缝滚动第四行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第五行无缝滚动第五行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第六行无缝滚动第六行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第七行无缝滚动第七行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第八行无缝滚动第八行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第九行无缝滚动第九行',
'date': '2017-12-16'
}],
}
},
}
</script>
<style lang="scss" scoped>
.warp {
height: 270px;
width: 360px;
margin: 0 auto;
overflow: hidden;
ul {
list-style: none;
padding: 0;
margin: 0 auto;
li,
a {
display: block;
height: 30px;
line-height: 30px;
display: flex;
justify-content: space-between;
font-size: 15px;
}
}
}
</style>
上面这个是最简单的官方使用案例。
我们自己使用的时候也可以加上父容器,给父容器设置边框等内容。
注意:需要给父容器一个height和 overflow:hidden.左右滚动需要给ul容器一个初始化css width.
下列这个例子就是没有直接在vue-seamless-scroll组件上加样式,而是在父级wrap-container上加上样式,同样可以实现无缝滚动
<template>
<div class="wrap-container">
<vue-seamless-scroll :data="listData" class="wrap">
<ul class="item">
<li v-for="(item, index) in listData" :key="index">
<span class="title" v-text="item.title"></span>
<span class="date" v-text="item.date"></span>
</li>
</ul>
</vue-seamless-scroll>
</div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
components: {
vueSeamlessScroll,
},
data() {
return {
listData: [
{
title: '无缝滚动第一行无缝滚动第一行',
date: '2017-12-16',
},
{
title: '无缝滚动第二行无缝滚动第二行',
date: '2017-12-16',
},
{
title: '无缝滚动第三行无缝滚动第三行',
date: '2017-12-16',
},
{
title: '无缝滚动第四行无缝滚动第四行',
date: '2017-12-16',
},
{
title: '无缝滚动第五行无缝滚动第五行',
date: '2017-12-16',
},
{
title: '无缝滚动第六行无缝滚动第六行',
date: '2017-12-16',
},
{
title: '无缝滚动第七行无缝滚动第七行',
date: '2017-12-16',
},
{
title: '无缝滚动第八行无缝滚动第八行',
date: '2017-12-16',
},
{
title: '无缝滚动第九行无缝滚动第九行',
date: '2017-12-16',
},
],
}
},
}
</script>
<style lang="less" scoped>
* {
padding: 0;
margin: 0;
}
.wrap-container{
height:200px;
border: 1px solid #ddd;
background-color: aqua;
overflow: hidden;
padding:12px;
}
.warp {
ul {
list-style: none;
padding: 0;
margin: 0 auto;
li,
a {
display: block;
height: 30px;
line-height: 30px;
font-size: 15px;
}
}
}
</style>
三,常见问题: vue-seamless-scroll滚动的时第一轮与第二轮衔接时会出现空白
可能有几种可能的原因: