示例一
示例二
安装
npm install vue-seamless-scroll --save
main.js中引入:
import scroll from 'vue-seamless-scroll';
Vue.use(scroll)
示例一代码
<template>
<vue-seamless-scroll :data="listData" class="seamless-warp">
<ul class="item">
<li v-for="(item, index) in listData" :key="index">
<span class="trains" v-text="item.trains"></span>
<span class="startandarrive" v-text="item.startandarrive"></span>
<span class="date" v-text="item.date"></span>
</li>
</ul>
</vue-seamless-scroll>
</template>
<script>
export default {
data() {
return {
listData: [
{
trains: "G000",
startandarrive: "北京-上海",
date: "2017-12-16",
},
{
trains: "G111",
startandarrive: "天津-上海",
date: "2017-12-16",
},
{
trains: "G222",
startandarrive: "成都-上海",
date: "2017-12-16",
},
{
trains: "G333",
startandarrive: "郑州-上海",
date: "2017-12-16",
},
{
trains: "G444",
startandarrive: "济南-上海",
date: "2017-12-16",
},
{
trains: "G555",
startandarrive: "兰州-上海",
date: "2017-12-16",
},
{
trains: "G666",
startandarrive: "西安-上海",
date: "2017-12-16",
},
{
trains: "G777",
startandarrive: "保定-上海",
date: "2017-12-16",
},
{
trains: "G888",
startandarrive: "咸阳-上海",
date: "2017-12-16",
},
{
trains: "G999",
startandarrive: "深圳-上海",
date: "2017-12-16",
},
],
};
},
};
</script>
<style lang="less" scoped>
.seamless-warp {
height: 229px;
overflow: hidden;
color: #409dff;
background: #fafafa;
.item {
margin: 0;
.trains {
margin-right: 50px;
font-weight: 600;
}
.startandarrive {
margin-right: 50px;
}
}
}
</style>
示例二代码:
<template>
<vue-seamless-scroll
:data="newsList"
:class-option="optionLeft"
class="seamless-warp2"
>
<ul class="item">
<li v-for="(item, index) in newsList" :key="index">
<img :src="item.url" alt="" />
</li>
</ul>
</vue-seamless-scroll>
</template>
<script>
export default {
data() {
return {
optionLeft: {
step: 2, //数值越大速度滚动越快
direction: 3, // 0向下 1向上 2向左 3向右
},
newsList: [
{
url:
"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
},
{
url:
"https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
},
{
url:
"https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
},
{
url:
"https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
},
{
url:
"https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
},
{
url:
"https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
},
{
url:
"https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
},
],
};
},
};
</script>
<style lang="less" scoped>
.seamless-warp2 {
overflow: hidden;
height: 200px;
width: 900px;
margin: 0 auto;
ul {
margin: 0;
padding: 0;
display: flex;
}
img {
width: 300px;
height: 100%;
}
}
</style>
配置项
key | description | default | val |
step | 数值越大速度滚动越快 | 1 | Number |
limitMoveNum | 开启无缝滚动的数据量 | 5 | Number |
hoverStop | 是否启用鼠标hover控制 | true | Boolean |
direction | 方向 0 往下 1 往上 2向左 3向右 | 1 | Number |
openTouch | 移动端开启touch滑动 | true | Boolean |
singleHeight | 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1 | 0 | Number |
singleWidth | 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 | 0 | Number |
waitTime | 单步停止等待时间(默认值1000ms) | 1000 | Number |
switchOffset | 左右切换按钮距离左右边界的边距(px) | 30 | Number |
autoPlay | 1.1.17版本前手动切换时候需要置为false | true | Boolean |
switchSingleStep | 手动单步切换step值(px) | 134 | Number |
switchDelay | 单步切换的动画时间(ms) | 400 | Number |
switchDisabledClass | 不可以点击状态的switch按钮父元素的类名 | disabled | String |
isSingleRemUnit | singleHeight and singleWidth是否开启rem度量 | false | Boolean |
navigation | 左右方向的滚动是否显示控制器按钮,true的时候autoPlay自动变为false | false | Boolean |
回调事件
name | description | calback params |
ScrollEnd | 一次滚动完成的回调事件 | null |