美文网首页
vue 从0到N数的过渡

vue 从0到N数的过渡

作者: Gaochengxin | 来源:发表于2019-11-05 20:56 被阅读0次

方法一:

       watch: { 
       subtit() {
        // 监听subtit变量
            const that = this;
            that.targets.params.titleSet.subtitle = 0; // 每次换数据副标题先清空
            that.timers = setInterval(function() {
              // 然后计时器从零加到总数得效果
             if (that.targets.params.titleSet.subtitle >= that.subtit) {
                // 如过大于等于总数那么就等于总数清楚计时器
                that.targets.params.titleSet.subtitle = that.subtit;
                clearInterval(that.timers);
                that.scolltime();
                return false;
              } else {
                that.targets.params.titleSet.subtitle += parseInt(that.subtit / 10);
              }
            }, 100);
          }
      }

// 作者:gaochengxin,
//采纳请点赞谢谢!

方法二:

                //引入
                 import ICountUp from "vue-countup-v2";
                components: {  ICountUp },
               //data里面
                  data(){return{
                        delay: 0,//延迟时间应该是 没用过
                        countups: {
                          useEasing: true,
                          useGrouping: true,
                          separator: ",",
                          decimal: ".",
                          prefix: "",
                          duration: 5,//动画时间单位(秒)
                          suffix: ""
                        },}}
            //直接使用html:
         <ICountUp
          :end-val="datasetTemp.params.titleSet.subtitle"//被动画的数
          :delay="delay"
          :options="countups"
        />
           // 作者:gaochengxin,
           //采纳请点赞谢谢!

相关文章

网友评论

      本文标题:vue 从0到N数的过渡

      本文链接:https://www.haomeiwen.com/subject/azzyjctx.html