zoukankan      html  css  js  c++  java
  • vue组件系列-走马灯组件

    <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 {
        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>            
  • 相关阅读:
    Balanced Binary Tree
    Convert Sorted List to Binary Search Tree
    Convert Sorted Array to Binary Search Tree
    Binary Tree Zigzag Level Order Traversal
    Validate Binary Search Tree
    Binary Tree Level Order Traversal II
    Binary Tree Level Order Traversal
    Maximum Depth of Binary Tree
    如何把U盘的两个盘或者多个盘合成一个
    bugku 想蹭网先解开密码
  • 原文地址:https://www.cnblogs.com/sybboy/p/12207235.html
Copyright © 2011-2022 走看看