文字無縫滾動效果，鼠標移入時暫停

　　　　項目背景：基於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="數組變量" 

                   　注：在<li>中須要用標籤包住要顯示的數據，若是<li>標籤中沒有子標籤，整個的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 :class-option="optionSetting"></vue-seamless-scroll>

computed:{
　　　　　　optionSetting(){
　　　　　　　　return {
                           step:1,//速度，值越大，速度越快
                          hoverStop:false,//鼠標懸停效果，false爲關閉該效果
　　　　　　　　　　singleHeight: 26,//單行停頓
　　　　　　　　　　waitTime: 2500,//單行停頓的時間
　　　　　　　　}
　　　　　　}
}    

　　　　vue-seamless-scroll的主要用途可用在圖片輪播，環形進度條，橫向進度條的功能