vue怎么实现公告消息横向无缝循环滚动

这篇文章主要讲解了“Vue怎么实现公告消息横向无缝循环滚动”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue怎么实现公告消息横向无缝循环滚动”吧！

marqueex.vue

<template><div class="my-outbox">  <div class="my-inbox" ref='box'>    <div class="my-list" : v-for="(item,index) in sendVal" :key='index' ref='list'>      <!--{{item.name}}刚刚购买了产品-->      <span class="my-uname">{{item.detail}}</span>    </div>  </div></div></template><script>export default {  name: 'my-marquee-left',  props: {       sendVal:{        type:Array,        default:[]    }  },  data () {    return {        note: {        backgroundImage:          "url(" + require("../../../static/images/common/msg.png") + ")",        backgroundSize: "20px 20px",        backgroundRepeat: "no-repeat",        backgroundPosition:"1%  50%"      },      // 定时器标识      nowTime: null,      // 每一个内容的宽度      disArr: []    }  },  mounted () {    // var that = this    var item = this.$refs.list    var len = this.sendVal.length    var arr = []    // 因为设置的margin值一样，所以取第一个就行。    var margin = this.getMargin(item[0])    for (var i = 0; i < len; i++) {      arr.push(item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离    }    this.disArr = arr    this.moveLeft()  },  beforeDestroy () {    // 页面关闭清除定时器    clearInterval(this.nowTime)    // 清除定时器标识    this.nowTime = null  },  methods: {    // 获取margin属性    getMargin (obj) {      var marg = window.getComputedStyle(obj, null)['margin-right']      marg = marg.replace('px', '')      return Number(marg) // 强制转化成数字    },    // 移动的方法    moveLeft () {      var that = this      var outbox = this.$refs.box      // 初始位置      var startDis = 0    //   console.log('that.disArr: ', that.disArr)      this.nowTime = setInterval(function () {        startDis -= 0.5        // console.log('初始化移动：', startDis)        if (Math.abs(startDis) > Math.abs(that.disArr[0])) {          // 每次移动完一个元素的距离，就把这个元素的宽度          that.disArr.push(that.disArr.shift())          // 每次移动完一个元素的距离，就把列表数据的第一项放到最后一项          // console.log('that.sendVal: ', that.sendVal)          // console.log('that.sendVal: ', that.sendVal.shift())          that.sendVal.push(that.sendVal.shift())          startDis = 0          // console.log('移动')        } else {          // console.log('不来不来就不来...')        }        // 每次都让盒子移动指定的距离，在我自己做的项目中，这种字符串拼接的方法并没有生效        // outbox.style = 'transfORM: translateX3D(' + startDis + 'px)'         // 后面换了es6的模板字符串就可以了        outbox.style = `transform: translateX(${startDis}px)`        // outbox.style = 'transform: translateX(\' + startDis + \' px)'        // outbox.style.marginLeft = 'startDis'        // console.log('这里:', startDis)      }, 1000 / 60)    }  }}</script><style lang="less" scoped>.my-outbox{    overflow: hidden;  color: #FFFFFF;  height: 35px;    .my-inbox{    white-space: nowrap;    .my-list{      margin-right: 100px;      display: inline-block;      font-size: 14px;      // height: 20px;      text-indent:30px;      line-height: 40px;      .my-uname{                color: #FFFFFF;      }    }  }}</style>

其他模块引入根据自己目录引入

html部分

<div class="messageBox">      <marqueeLeft :sendVal="newsList"></marqueeLeft></div>

js部分

import marqueeLeft from "./marqueeX";export default {  data() {    return {      newsList: [        {          name: "张三1",          detail:            "信息公告：2020年10月14限公司成立，我行用信金额111111元",        },        {          name: "张三2",          detail:            "信息公告：2020年9月30大幅度发大发的，我行用信金额222222元",        },        {          name: "张三3",          detail:            "信息公告：2020年12月有限公司成立，我行用信金额333333元",        },        {          name: "张三4",          detail:            "信息公告：2020年8月31有限公司成立，我行用信金额444444元",        },      ],    };  },  components: {    marqueeLeft,  },

CSS部分

.messageBox {  width: 60%;  overflow: hidden;}

感谢各位的阅读，以上就是“vue怎么实现公告消息横向无缝循环滚动”的内容了，经过本文的学习后，相信大家对vue怎么实现公告消息横向无缝循环滚动这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！