vue中实现文字超出横向滚动
 
marquee组件
 
<template>
  <div class="marquee-wrap" ref="marquee-wrap">
    <div class="scroll" ref="scroll">
      <p class="marquee">{{text}}</p>
      <p class="copy" ref="copy"></p>
    </div>
    <p class="getWidth" ref="getWidth">{{text}}</p>
  </div>
</template>

<script>
export default {
  name: 'marquee',
  props: ['val'],
  data () {
    return {
      timer: null,
      text: ''
    }
  },
  created () {
    let timer = setTimeout(() => {
      this.move()
      clearTimeout(timer)
    }, 1000)
  },
  mounted () {
    for (let item of this.val) {
    this.text += item
    }
  },
  methods: {
    move () {
    let maxWidth = this.$refs['marquee-wrap'].clientWidth
    let width = this.$refs['getWidth'].scrollWidth
      if (width <= maxWidth) return
    let scroll = this.$refs['scroll']
    let copy = this.$refs['copy']
      copy.innerText = this.text
      let distance = 0 
      this.timer = setInterval(() => {
        distance -= 1
        if (-distance >= width) {
          distance = 16
        }
        scroll.style.transform = 'translateX(' + distance + 'px)'
      }, 20)
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
  .marquee-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .marquee{
    margin-right: 0.16rem;
  }
  p {
    word-break:keep-all;
    white-space: nowrap;
    font-size: 0.28rem;
  }
  .scroll {
    display: flex;
  }
  .getWidth {
    word-break:keep-all;
    white-space:nowrap;
    position: absolute;
    opacity: 0;
    top: 0;
  }
</style>
 
使用marquee组件
 
//引入组件
import Marquee from './marquee'
//注册并使用
<Marquee :val=""></Marquee>

html代码：
 
    <div class="box">
      <div class="content"></div>
      <div class="content"></div>
      <div class="content"></div>
      <div class="content"></div>
      <div class="content"></div>
      <div class="content"></div>
    </div>
 
CSS代码：
 
     .box {
        margin: 0 auto;
        width: 800px;
        height: 400px;
        background-color: aqua;
        overflow: scroll; /*超出部分滚动不换行*/
        white-space: nowrap; /*超出不换行，必须加，否则横向超出部分会自动换行*/
      }
      .content {
        display: inline-block; /*切记不能使用flex*/
        background-color: yellowgreen;
        margin-left: 50px;
        width: 200px;
        height: 800px;
      }
 
效果如下：
 

一、npm 安装
 
如果你想安装插件（自己写的）
 
安装
 
# install dependencies
npm i marquee-components

 
使用
 
在main.js引入
 
import marquee from 'marquee-components'
Vue.use(marquee );
 
在页面使用
 
<template>
  <div id="app">
       <marquee :val="msg"></marquee>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'
    }
  }
}
</script>
 
val后加文字即可，当超过文本容器长度时，触动横向滚动效果。
 
二、直接引入组件
 
marquee组件
 
<template>
  <div class="marquee-wrap">
    <div class="scroll">
      <p class="marquee">{{text}}</p>
      <p class="copy"></p>
    </div>
    <p class="getWidth">{{text}}</p>
  </div>
</template>

<script>
export default {
  name: 'marquee',
  props: ['val'],
  data () {
    return {
      timer: null,
      text: ''
    }
  },
  created () {
    let timer = setTimeout(() => {
      this.move()
      clearTimeout(timer)
    }, 1000)
  },
  mounted () {
    for (let item of this.val) {
      this.text += ' ' + item
    }
  },
  methods: {
    move () {
      let maxWidth = document.querySelector('.marquee-wrap').clientWidth
      let width = document.querySelector('.getWidth').scrollWidth
      if (width <= maxWidth) return
      let scroll = document.querySelector('.scroll')
      let copy = document.querySelector('.copy')
      copy.innerText = this.text
      let distance = 0 
      this.timer = setInterval(() => {
        distance -= 1
        if (-distance >= width) {
          distance = 16
        }
        scroll.style.transform = 'translateX(' + distance + 'px)'
      }, 20)
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
  .marquee-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .marquee{
    margin-right: 16px;
  }
  p {
    word-break:keep-all;
    white-space: nowrap;
    font-size: 16px;
    font-family: "微软雅黑 Light";
  }
  .scroll {
    display: flex;
  }
  .getWidth {
    word-break:keep-all;
    white-space:nowrap;
    position: absolute;
    opacity: 0;
    top: 0;
  }
</style>

 
其他页面引入marquee组件
 
<template>
  <div class="container">
        <marquee :val="title"></marquee>
  </div>
</template>
<script>
import marquee from './marquee'
 name: 'index',
 components: {
    marquee
 },
  data () {
    return {
		title: ''
    }
  },
</script>

 
 

  在线
  演示 
  
 
   
<!doctype html>
 
   
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        *{ margin:0; padding:0;}
        body{font:12px/1 '微软雅黑';background: #fff;}
        .wrap{ width:140px; padding:10px;}
        .info{ padding-top:10px; overflow:hidden;}
        .inner{ width:1000px;height:172px; height:17px; line-height:17px; overflow:hidden;}
        .inner p{ display:inline-block;}
    </style>
</head>
<body>
<div class="wrap">
    <div class="img"><img src="http://dummyimage.com/140x90/" alt=""/></div>
    <div id="info" class="info">
        <div class="inner">
            <p class="txt">文字如果超出了自动向左滚动</p>
        </div>
    </div>
</div>
<script>
    function scroll(){
        var info = document.getElementById('info');
        var div = info.getElementsByTagName('div')[0];
        var p = document.getElementsByTagName('p')[0];
        var p_w = p.offsetWidth;
        var div_w = info.offsetWidth;
        if(div_w > p_w){ return false; }
        div.innerHTML += div.innerHTML;

        setInterval(function(){
            if(p_w <= info.scrollLeft){
                info.scrollLeft -= p_w;
            } else {
                info.scrollLeft++;
            }
        }, 30);
    }
    scroll();


</script>
</body>
</html>
 
  
 
  
 
 
 
 
 
引用：http://bbs.csdn.net/topics/390908118
 
 
转载于:https://www.cnblogs.com/vendy/p/5633639.html