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{
  /*color: #D7BC8D;*/
  overflow: hidden;
  color: #FFFFFF;
  height: 35px;
  /*background: #422b02;*/
  .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: #FF8900;*/
        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怎么實現公告消息橫向無縫循環滾動這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！