vue-seamless-scroll

记录一下，学习的笔记

 

//安装
npm install vue-seamless-scroll --save

//在main.js引用  全局使用

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

//在所用组件中使用
//import vueSeamless from 'vue-seamless-scroll'
  // export default {
    //  components: {
    //    vueSeamless
     // }
 //  }


<template>
    <vue-seamless-scroll :data="listData" :class-option="optionSingleHeight"    class="seamless-warp">
        <ul class="item">
            <li v-for="item in listData"  :key="item.id">
                <a href="">
                    <span class="title" v-text="item.title"></span>
                    <span class="date" v-text="item.date"></span>
                 </a>
                   
             </li>
          </ul>
     </vue-seamless-scroll>
     
</template>

export default {
  name:'index',
  
  data(){
    return{
      listData: [{
        'title': '无缝滚动第一行无缝滚动第一行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第二行无缝滚动第二行',
        'date': '2017-12-16'
      }, {
          'title': '无缝滚动第三行无缝滚动第三行',
          'date': '2017-12-16'
      },{
          'title': '无缝滚动第五行无缝滚动第五行',
          'date': '2017-12-16'
      }]
    
    }
  },
  computed:{
     optionSingleHeight () {
      return {
                singleHeight: 26,
                waitTime: 2500
              }
    }
  }
}

<style scoped>
.seamless-warp{
  height: 20px;
  overflow: hidden;
  margin-top: 5px;
}
.seamless-warp ul li{//如果不设置这个，滚动会出现断层
  margin-bottom: 5px;
  font-size: 14px;
}
</style>

不知道为啥，当数据为四条的时候，它就不滚动了，

参考来自https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-others