vue插件vue-seamless-scroll实现单行文字向上滚动

1. 安装vue-seamless-scroll

npm install vue-seamless-scroll --save

2. 在main.js全局引入

import scroll from 'vue-seamless-scroll'

Vue.use(scroll)

3. 在需要的地方引入

html部分:

<div class="electricscrollbox">

                <vue-seamless-scroll

                  :data="listData"

                  :class-option="optionHover"

                  class="seamless-warp"

                >

                  <ul class="item">

                    <li v-for="item in listData" :key="item">

                      <span>更新：2022-01-12</span>

                      <span>监测到设备离线</span>

                      <span @click="goPoweralarm">处理</span>

                    </li>

                  </ul>

                </vue-seamless-scroll>

  </div>

css样式部分，高度样式需要根据自己项目自行调整：

.electricscrollbox {

  margin-top: 10px;

  background: #8a8ead47;

  .seamless-warp {

    height: 30px;

    overflow: hidden;

  }

  ul {

    margin: 0;

    padding: 0;

  }

  ul li {

    height: 30px;

    line-height: 30px;

    list-style-type: none;

    display: flex;

    justify-content: space-around;

  }

}

数据部分：

      listData: [{

        'title': '无缝滚动第一行无缝滚动第一行',

        'date': '2017-12-16'

      }, {

        'title': '无缝滚动第二行无缝滚动第二行',

        'date': '2017-12-16'

      }, {

        'title': '无缝滚动第三行无缝滚动第三行',

        'date': '2017-12-16'

      }, {

        'title': '无缝滚动第四行无缝滚动第四行',

        'date': '2017-12-16'

      }, {

        'title': '无缝滚动第五行无缝滚动第五行',

        'date': '2017-12-16'

      }]

js参数配置部分：

computed: {

    optionHover() {

      return {

        hoverStop: false, //是否悬停

        waitTime: 2500, //单行停顿时间

        singleHeight: 30,//单步运动停止的高度(默认值0是无缝不停止的滚动)很重要要跟li的高度一样

      }

    }

  },

4.效果展示