vue實現文字內容無縫向上滾動,鼠標移入停止滾動,鼠標移開繼續滾動

 <div class="home-list">
            <div v-for="item in events" :key="item.id" ref="contlist" :class="{'animate-up':animateUp}" @mouseenter="Stop()" @mouseleave="Up()">
              <div class="home-content">
                <div class="home-event">
                  <span class="div-style-left">事件:</span>
                  <span>{{ item.type }}</span>
                </div>
                <div class="home-time">
                  <span class="div-style-left">時間:</span>
                  <span>{{ item.time }}</span>
                </div>
                <el-button type="text" class="home-view" @click="eventView(item)">查看</el-button>
              </div>
            </div>
          </div>

上面是模板的內容,實時告警很多消息的話,就需要實現告警消息無縫滾動的效果了

.animate-up {
    transition: all 0.5s ease-in-out;
    transform: translateY(-40px);
  }

滾動動畫樣式

// 控制動畫
animateUp: false,
// 計時器
intNum: null,
// 內容
 events: [
        {
          id: 1,
          type: '異常停車',
          name: '測試',
          time: '2020-06-15 09:22:15',
          status: 2,
          imgUrl1: ''
        },
        {
          id: 2,
          type: '環境衛生',
          name: '測試',
          time: '2020-06-16 10:22:15',
          status: 3,
          imgUrl1: ''
        },
        {
          id: 3,
          type: '拋灑物',
          name: '測試',
          time: '2020-06-17 11:22:15',
          status: 3,
          imgUrl1: ''
        },
        {
          id: 4,
          type: '交通擁堵',
          name: '測試',
          time: '2020-06-18 12:22:15',
          status: 1,
          imgUrl1: ''
        }
      ]

這上面是data初始化的一些基本數據

mounted() {
    this.ScrollUp()
  },
  destroyed() {
    clearInterval(this.intNum)
  },
  methods: {
    ScrollUp() {
      this.intNum = setInterval(() => {
        this.animateUp = true// 向上滾動的時候需要添加css3過渡動畫
        setTimeout(() => {
          this.events.push(this.events[0])// 將數組的第一個元素添加到數組的
          this.events.shift() // 刪除數組的第一個元素
          this.animateUp = false
        }, 500)
      }, 1000)
    },
    // 鼠標移上去停止
    Stop() {
      clearInterval(this.intNum)
    },
    // 鼠標離開繼續滾動
    Up() {
      this.ScrollUp()
    }
 }

上面是實現無縫滾動,和鼠標移入內容停止滾動,鼠標移開繼續上次的內容滾動顯示的方法
在這裏插入圖片描述
這是我實現的效果圖示

如果沒有鼠標移入移出的需求的話,把上面的方法改成下面的這種;data初始化的intNum: null變爲timer: null就好了

	  mounted() {
	     this.timer = setInterval(() => {
	       this.scrollAnimate()
	    }, 1000)
	  },
    scrollAnimate() {
      this.animateUp = true
      setTimeout(() => {
        this.events.push(this.events[0])
        this.events.shift()
        this.animateUp = false
      }, 500)
    },

這樣子vue實現消息無縫滾動就成功了★,°:.☆( ̄▽ ̄)/$:.°★

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章