Vue实现横向无缝滚动

需求描述

需要实现一个信息条横向无缝滚动，鼠标移上停止滚动移开继续滚动的效果如下图，

技术实现

本着高效开发的目的，第一步自然是去找有没有合适现成的轮子就直接用了。果然vue-seamless-scroll就能完美实现以上要求。于是封装了一个基于vue-seamless-scroll的信息横向无缝滚动组件

1. 安装vue-seamless-scroll

npm install vue-seamless-scroll -S　　

2. 新建marqueex.vue 组件并引入vue-seamless-scroll

   html部分

     <div class="main">
     <div class="left">
       <img src="@/assets/imgs/alarm.png" alt="" />
       <span> 最新资讯： </span>
     </div>
     <div class="right">
       <vue-seamless-scroll
         :data="dataList"
         :class-option="optionLeft"
         class="seamless-warp2"
       >
         <ul class="item">
           <li v-for="(item, index) in dataList" :key="index"  :data-index="index">
             {{
               item
             }}
           </li>
         </ul>
       </vue-seamless-scroll>
     </div>
   </div>
   

   引入部分

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

   配置参数部分

    computed: {
       optionLeft() {
       return {
           step:0.8,
           direction: 2,// 0向下 1向上 2向左 3向右
           // limitMoveNum: this.dataList.length,// 开始无缝滚动的数据量 this.dataList.length
           hoverStop: true,
           openTouch: false,
       };
       },
   },