文字无缝滚动效果，鼠标移入时暂停

　　　　项目背景：基于vue的项目

　　　　昨天需要写一个效果，需要将数据自动轮播，然后鼠标移入时，轮播暂停。就像文字走马灯的效果类似。走马灯的效果可以使用css实现。

　　　　这里说一下我用的插件vue-seamless-scroll 这个插件将文字无缝滚动，单行停顿滚动都封装了一下，同时，这个插件同样可用在图片轮播的效果。还是很方便的。

　　　　示例代码地址：https://github.com/dreamITGirl/VueProgect/tree/master/project-demo/src/components/RidingLatern

　　　  

　　　　具体效果如上图所示

　　　　vue-seamless-scroll文字无缝滚动的使用方法

 

　　　　1.项目引入　　　

yarn add vue-seamless-scroll --save
npm i vue-seamless-scroll --save

　　  　　2.在vue文件中引入方式

　　　　　　①全局引入　　　　　

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

　　　　　　②局部引入（大型项目的话，建议使用这种方式）

　　　　　　建议如果需求比较复杂，建议下载下来组件源码，放在组件中，这样后面可以修改源码，增加自己的需求，对组件再做二次封装

　　　　3.vue-seamless-scroll参数介绍

　　　　　①:data="数组变量" 

                   　注：在

中需要用标签包住要显示的数据，如果

标签中没有子标签，整个的ul是不往上滚动的

　　　　　　同时如果seamless-wrap这个类名如果没有定义高度，整个的列表滚动时会看到ul重置回到原始位置的过程

 

<template>
    <vue-seamless-scroll :data="listData" class="seamless-warp">
        <ul class="item">
            <li v-for="item in listData">
                <span class="title" v-text="item.title">span><span class="date" v-text="item.date">span>
            li>
        ul>
    vue-seamless-scroll>
template>
<style lang="scss" scoped>
    .seamless-warp {
        height: 229px;
        overflow: hidden;
    }
style>
<script>
    export default {
        data () {
            return {
                listData: [{
                   'title': '无缝滚动第一行无缝滚动第一行',
                   'date': '2017-12-16'
                 }, {
                    'title': '无缝滚动第二行无缝滚动第二行',
                    'date': '2017-12-16'
                 }]
                }
            }
       }
　　}
script>

　　　　　　② 设置速度、鼠标悬停效果、单行停顿、单行停顿时间需要设置在computed中。通过属性class-option设置

　　　　　　　　

vue-seamless-scroll>

computed:{
　　　　　　optionSetting(){
　　　　　　　　return {
                           step:1,//速度，值越大，速度越快
                          hoverStop:false,//鼠标悬停效果，false为关闭该效果
　　　　　　　　　　singleHeight: 26,//单行停顿
　　　　　　　　　　waitTime: 2500,//单行停顿的时间
　　　　　　　　}
　　　　　　}
}    

　　　　vue-seamless-scroll的主要用途可用在图片轮播，环形进度条，横向进度条的功能