无缝滚动插件vue-seamless-scroll插件使用及问题

一、使用

安装

npm install vue-seamless-scroll --save-dev

main.js文件引入

// 无缝滚动插件
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

html

//
<vue-seamless-scroll
     :data="projectDesList"//插入的数据
     :class-option="classOption" //参数配置，计算属性
     class="seamless-warp"//样式设置一定要有高度
     @mouseover.native="hoverStatus" @mouseout.native="nohoverStatus"
>
   <ul class="item">
      <li v-for="(item,ind) in projectDesList" :key="ind">
      <p class="top-name-toast">{{item.company_name}}</p><span class="title" v-text="item.title" :data-index="ind"></span>
      <span class="title" v-text="item.title1"></span>
      </li>
   </ul>
</vue-seamless-scroll>

css样式

         .seamless-warp {
                height: 250px;
                overflow: hidden;
            }

vue

//设置计算属性
computed: {
        classOption() {
            return {
                step: this.is_scroll,//表示滚动速度,值越大越快,这里用变量可以更好控制列表滚动,比如切换列表的时候,设置this.is_scroll为0,就不再滚动
                hoverStop: true,
            }
        }

    },

二、问题:

插件内事件丢失
因为无缝滚动,会插入一段原来的代码,但是内容事件并插入,这时候使用委托事件的方式可以很好的解决
例如想要实现hover span标签,展示p标签内容

hoverStatus(e) {
            let dom = e.target;
            let index = dom.getAttribute('data-index')
            if (dom.nodeName.toLowerCase() === 'span' && index) {
            // 元素布局特殊性,获取hover元素的兄弟设置样式
                dom.previousSibling.style.opacity = '0.8'
            }
        },
        nohoverStatus(e) {
            let dom = e.target;
            let index = dom.getAttribute('data-index')
            if (dom.nodeName.toLowerCase() === 'span' && index) {
                dom.previousSibling.style.opacity = '0'
            }

        },