vue组件系列-走马灯组件

Posted 2021-03-15 sybboy

<template>
  <div class="sec-alert">
    <div :class="{ animated: isAnimating }">
      <div class="line" v-text="tips[0]"></div>
      <div class="line" v-text="tips[1]"></div>
    </div>
  </div>
</template>
<script>
import { broadcast } from ‘../utils/data.js‘;
let timer
export default {
  name: ‘Broadcast‘,
  props: {
  },
  data() {
    return {
      ti: 0,
      tips: [],
      isAnimating: false,
      alerts: broadcast.data || []
    }
  },
  methods:{
    startAnimate() {
      if (timer) clearInterval(timer)
      let _alerts
      if (this.alerts.length === 0){
        _alerts = []
      } else if (this.alerts.length === 1) {
        _alerts = [ this.alerts[0], this.alerts[0] ]
      } else {
        _alerts = this.alerts
      }
      this.ti = 1
      this.tips = _alerts.slice(0, 2)
       //this.ti = 0
      //this.tips = _alerts.slice(this.ti, this.ti + 2)
      timer = setInterval(() => {
        this.isAnimating = true
        setTimeout(() => {
          this.isAnimating = false
          this.$nextTick(() => {
                        //这里是数据随机取法
            let _ridx = Math.floor(Math.random() * _alerts.length);
            this.tips = [_alerts[this.ti], _alerts[_ridx]];
            this.ti = _ridx;
  
                        //数据按顺序取法
                      if (this.ti === _alerts.length - 2) {
                       this.ti = this.ti + 1
                      this.tips = [ _alerts[_alerts.length - 1], _alerts[0] ]
                    } else {
                      this.ti = (this.ti + 1) % _alerts.length
                      this.tips = _alerts.slice(this.ti, this.ti + 2)
                    }
                
          })
        }, 500)
      }, 3000);
    }
  },
  mounted() {
    this.startAnimate()
  },
  watch: {
    alerts() {
      if (this.alerts && this.alerts.length) {
        this.startAnimate()
      }
    }
  },
  destroyed() {
    if (timer) {
      clearInterval(timer)
      timer = null
    }
  }
}
</script>
<style lang="postcss">

  .sec-alert {
    width:95%; 
    margin:0 auto;
    height: 61px;
    border-radius: 6px;
    background: url(‘../assets/images/hongbao_scroll_icon.jpg‘) no-repeat 20px center #db2031;
    overflow: hidden;
    padding-left: 73px;
    .line{
      line-height:61px;
      font-family: PingFangSC;
      font-size: 26px;
      letter-spacing: 0.52px;
      color: #f9d587;
    }
    .animated {
      transform: translateY(-50%);
      transition: transform .4s linear;
    } 
  }
</style>