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

原创

已于 2024-12-10 09:31:14 修改 · 1.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2021-08-09 11:56:54 首次发布

博客主要围绕Vue展开，介绍了安装方法，包括在main.js中引入，还给出示例一和示例二的代码，同时提及了配置项和回调事件等内容，为Vue的使用提供了基础指引。

示例一

示例二

安装

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: {