跑马灯插件 vue-seamless-scroll

最新推荐文章于 2025-10-14 09:00:00 发布

原创最新推荐文章于 2025-10-14 09:00:00 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

demo 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用vue-seamless-scroll插件实现跑马灯效果，包括全局安装、引入配置及具体组件实例代码。通过调整参数可以改变滚动速度、方向等。

vue跑马灯插件 vue-seamless-scroll

全局安装：

npm  i  vue-seamless-scroll --save

引入main.js中：

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

跑马灯组件

<template>
  <div class="page-example3">
    <vue-seamless-scroll :data="listData" :class-option="defaultOption" >
      <ul class="ul-scoll">
          <li v-for="(n,index) in listData" :key="index" class="cycle">
              <div class="left" :class="index == n.type?'index'+ index:''">
                  {{n.name}}
              </div>
              <div class="right">
                  <p>{{n.title}}</p>
                  <p>{{n.content}}</p>
              </div>
          </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
export default {
  data(){
    return{
      listData:[{
        type:0,
        name:'视频设备离线预警',
        title:'门闸机离线',
        content: '【XXXXXX项目】在2021年6月6日12:12-20216月6日15:00已连续2个小时视频在线率低于50%，请进行处理',
      },
      {
        type:1,
        name:'扬尘超标预警',
        title:'扬尘设备离线',
        content: '【XXXXXX项目】在2021年6月6日12:12-20216月6日15:00已连续2个小时视频在线率低于50%，请进行处理',
      },{
        type:2,
        name:'塔吊长时间未运行',
        title:'安全帽公示',
        content: '【XXXXXX项目】在2021年6月6日12:12-20216月6日15:00已连续2个小时视频在线率低于50%，请进行处理',
      },{
        type:3,
        name:'安全帽公示',
        title:'扬尘超标',
        content: '【XXXXXX项目】在2021年6月6日12:12-20216月6日15:00已连续2个小时视频在线率低于50%，请进行处理',
      },{
        type:4,
        name:'扬尘超标预警',
        title:'视频在线率',
        content: '【XXXXXX项目】在2021年6月6日12:12-20216月6日15:00已连续2个小时视频在线率低于50%，请进行处理',
      }]
    }
  },
  computed: {
    defaultOption () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: this.listData.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.page-example3{
    width: 480px;
    height: 420px;
    overflow: hidden;
    margin: auto;
    margin-top: 40px;
    .ul-scoll{
        li{
            margin: 6px;
            padding: 5px;
            // background: rgba(198, 142, 226, 0.4);
            display: flex;
            width: 467px;
            height: 80px;
            background: rgba(32, 54, 85, 0.7);
            margin-bottom: 8px;
            align-items: center;
            justify-content: space-around;
            .left{
              width: 76px;
              height: 50px;
              background: linear-gradient(45deg, rgba(255, 107, 93, 0.96), rgba(255, 141, 87, 0.96));
              border-radius: 4px;
              text-align: center;
            }
            .index1{
              background: linear-gradient(45deg, rgba(107, 164, 246, 0.96), rgba(94, 252, 232, 0.96));
            }
            .index2{
              background: linear-gradient(45deg, rgba(93, 104, 255, 0.96), rgba(198, 87, 255, 0.96));
            }
            .index3{
              background: linear-gradient(195deg, rgba(254, 193, 99, 0.96), rgba(233, 87, 36, 0.96));
            }
            .index4{
              background: linear-gradient(45deg, rgba(107, 164, 246, 0.96), rgba(94, 252, 232, 0.96));
            }
            .right{
                p:nth-child(1){
                    font-size: 16px;
                    font-weight: 500;
                    color: #03A2FD;
                }
                p:nth-child(2){
                    width: 341px;
                    height: 36px;
                    font-size: 14px;
                    font-weight: 500;
                    color: #FFFFFF;
                    text-indent: 1em;
                    margin-bottom: 20px;
                }
            }
        }
    }
}
</style>