基于vue-seamless-scroll怎么实现无缝滚动效果

这篇文章主要介绍了基于vue-seamless-scroll怎么实现无缝滚动效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇基于vue-seamless-scroll怎么实现无缝滚动效果文章都会有所收获，下面我们一起来看看吧。

安装vue-seamless-scroll

npm install vue-seamless-scroll --save　

引入组件

全局引入在main.js中添加

import scroll from 'vue-seamless-scroll'Vue.use(scroll)

组件局部引入

<vue-seamless-scroll></vue-seamless-scroll>import vueSeamlessScroll from 'vue-seamless-scroll'components: {        vueSeamlessScroll},

配置参数

// 监听属性 类似于data概念computed: {        defaultOption () {                return {                    step: 0.2, // 数值越大速度滚动越快                    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length                    hoverStop: true, // 是否开启鼠标悬停stop                    direction: 1, // 0向下 1向上 2向左 3向右                    openWatch: true, // 开启数据实时监控刷新dom                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)                }            }         },　

完整实例代码

<template>    <div class="" >        <div class="page-example3" >            <vue-seamless-scroll :data="listData" :class-option="defaultOption" >                <ul class="ul-scoll">                    <li v-for="(item, index) in listData" :key='index'>                        <span class="title">{{item.title}}：</span><span class="date">{{item.time}}</span>                    </li>                </ul>            </vue-seamless-scroll>        </div>    </div></template> <script>    import vueSeamlessScroll from 'vue-seamless-scroll'    export default {        name: 'Example3',        data() {            // 这里存放数据            return {                listData: []            }        },        // import引入的组件需要注入到对象中才能使用        components: {            vueSeamlessScroll        },        // 监听属性 类似于data概念        computed: {            defaultOption () {                return {                    step: 1, // 数值越大速度滚动越快                    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length                    hoverStop: true, // 是否开启鼠标悬停stop                    direction: 1, // 0向下 1向上 2向左 3向右                    openWatch: true, // 开启数据实时监控刷新dom                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)                }            }         },        // 方法集合        methods: {},        // 监控data中的数据变化        watch: {},        // 生命周期 - 创建完成（可以访问当前this实例）        created() {         },        // 生命周期 - 挂载完成（可以访问DOM元素）        mounted() {            for(let i = 0 ; i < 15 ; i++){                let j = {                    title:'无缝滚动第几条啊啊啊-'+i,                    time: '2020-04-10'                }                this.listData.push(j)            }        }    }</script> <style scoped lang="scss">    //@import url(); 引入公共css类    .page-example3{        width: 400px;        height: 200px;        overflow: hidden;        border: 1px solid #283dff;        .ul-scoll{            li{                margin: 6px;                padding: 5px;                background: rgba(198, 142, 226, 0.4);            }        }    }</style>

关于“基于vue-seamless-scroll怎么实现无缝滚动效果”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“基于vue-seamless-scroll怎么实现无缝滚动效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。