vue label 宽度_vue无缝滚动

vue无缝滚动 0 1需求

在大屏幕上实现中高风险地区的展示，如果数据量小，静态显示；如果数据量大实现不停歇滚动播放。

0 2html

<template>  <el-row class="main" :span="24">    <el-col :span="3" class="high-title">今日中高风险地区el-col>        <el-col :span="18" class="PackagingShell" id="PackagingShell">      <div id="viewBox">        <span id="marquee">{{ text }}span>        <span id="transcript">span>      div>      <div id="hide">{{ text }}div>    el-col>  el-row>template>

0 3css部分

<style scoped>.main {  width: 100%;}.high-title {  color: #d14c3e;  border-right: 2px solid #00ffff;}/*公告滚动盒子样式*/.PackagingShell {  overflow: hidden;  color: #fde665;  text-align: left;  padding-left: 20px;}/*主题内容块设置*/#viewBox,#marquee {  white-space: nowrap;}/*获取宽度的块，用z-index隐藏*/#hide {  position: absolute;  z-index: -999;  top: -9999px;  white-space: nowrap;}style>

0 4js

<script>export default {  data() {    return {      text: '', // 内容      textWidth: 0, // 字符长度      isScroll: false, // 是否滚动      highList: [        {          value: 1,          label: '天山区'        },        {          value: 2,          label: '乌鲁木齐市沙依巴克区'        },        {          value: 3,          label: '乌鲁木齐市新市区'        },        {          value: 4,          label: '乌鲁木齐市头磨沟区'        },        {          value: 5,          label: '乌鲁木齐市头屯河区'        },        {          value: 6,          label: '大连市西岗区'        }      ]    };  },  methods: {    /* 初始化函数 */    init() {      let str = this.highList        .map(function(e) {          return e.value + '.' + e.label;        })        .join(' ；');      this.text = str;    },    move() {      let width = document.getElementById('hide').getBoundingClientRect().width;      // 获取展示块盒模型宽度      let BoxWidth = document.getElementById('PackagingShell').offsetWidth;      // 获取内容展示宽      let viewBox = document.getElementById('viewBox');      // 设置初始位移距离      let distance = 0;      // 移动函数,通过定时器实现      setInterval(function() {        // 位移内用记录是是递减,此处的 1 控制移动变量 s        distance = distance - 1;        // 判断是否整个内容移动完        if (-distance >= width) {          // 若移动完,则重新设定位移值,此处赋值200是正好把 上面设置的块间距  200px 也加入移动范围,实现移动完无缝跳转          distance = 100;        }        // 实时设置位移距离        viewBox.style.transform = 'translateX(' + distance + 'px)';      }, 27); // 移动时间间隔t   s和t 共同决定移动速度    }  },  mounted() {    this.init();  },  // 更新的时候运动  updated: function() {    this.move();  }};script>

0 5效果 扫码关注更多精彩等待你发现