Vue无缝滚动轮播插件vue-seamless-scroll

示例一

示例二 

安装 

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

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值