• 数字变化时的滚动效果(VUE)组件化


    1.外部引入
    styleHeight:样式的高度,Number: 数字大小
    <compute-number
                    :styleHeight="44"
                    :number="Number(1905)"
                  >
    </compute-number>
     
    2.组件代码
    <template>
      <div id="demo">
        <div class="nwwest-roll" :style="{'height': styleHeight + 'px'}" id="nwwest-roll">
          <ul id="roll-ul" class="roll-ul">
            <li v-for="(item, index) in list"  :style="{'height': styleHeight + 'px'}" ref="rollul" class="rollLi" :class="{anim:animate==true}">
              <span class="name">{{item}}</span>
            </li>
          </ul>
        </div>
      </div>
    </template>
    <script>
      export default {
    // 此处是模拟数字变化,所以数字都不会改变,
        props: {
          number: {
            type: Number,
            default: 0
          },
          styleHeight: {
            type: Number,
            default: 0
          }
        },
        watch: {
          number (newValue, oldValue) {
            this.list[1] = newValue
            this.list[0] = oldValue
            this.num = newValue;
          }
        },
        data () {
          return {
            animate: true,
            list: [this.number, this.number],
            num: this.number,
            newNum: this.number,
            timeout: '',
            timeInterval: ''
          }
        },
        mounted () {
          this.timeInterval = setInterval(() => {
            this.scroll(this.number);
          }, 4000);
        },
        beforeDestroy() {
          clearInterval(this.timeout)
          clearInterval(this.timeInterval)
        },
        methods: {
          scroll(num){
            let con1 = this.$refs.rollul;
            /* styleHeight */
            // let marginTopHeight = (this.styleHeight - 10) + 'px'
            con1[0].style.marginTop = 0;
            this.animate = !this.animate;
            var that = this;
            that.timeout = setTimeout(() =>{
              that.list[1] = num
              con1[0].style.marginTop = -this.styleHeight + 'px';
              that.animate = !that.animate;
              setTimeout(() => {
                that.list[0] = num
              }, 1000);
            }, 80)
          }
        }
      }
    </script>
    <style lang="" scoped>
      .nwwest-roll {
        overflow: hidden;
      }
      .nwwest-roll .name{
        display: inline-block;
      }
     
      .roll-ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .anim {
        transition: all 1s;
      }
    </style>
  • 相关阅读:
    java8特性 Optional 工具类
    SpringBoot 配置支付宝接口
    Redis宕机 快速恢复
    flowable流程引擎通过模型ID部署流程
    java OA系统 自定义表单 流程审批 电子印章 手写文字识别 电子签名 即时通讯
    Mybatis 动态执行SQL语句
    idea 访问 jsp 404问题
    变量名的命名
    CSS设计 Search窗口
    jQuery实现Ajax功能示例
  • 原文地址:https://www.cnblogs.com/soonK/p/12641654.html
Copyright © 2020-2023  润新知