首页数字跳动效果。

src/pages/home/CustomerView.vue

@@ -41,8 +41,9 @@
                                     <i-col span="5" class="big-blank">
                                     </i-col>
                                     <i-col span="10" class="big-blank">
-                                        <row class="top-5"><span
-                                                class="huge-blank-font">{{customerViewVO.allCustomer}}</span></row>
+                                        <row class="top-5">
+                                            <countTo :startVal='startVal' :endVal='endVal' :duration='3000' class="huge-blank-font"></countTo>
+                                        </row>
                                         <row><span class="weight-700">好友总数</span></row>
                                     </i-col>
 
@@ -58,8 +59,10 @@
 <!--                                    <i-col span="4" class="big-blank">-->
 <!--                                    </i-col>-->
                                     <i-col span="4" class="big-blank">
-                                        <row class="top-15"><span
-                                                class="big-blank-font">{{customerViewVO.newCustomer}}</span></row>
+                                        <row class="top-15">
+                                            <countTo :startVal='startVal2' :endVal='endVal2' :duration='3000' class="big-blank-font"></countTo>
+
+                                        </row>
                                         <row class="top-10"><span>新增好友</span></row>
                                     </i-col>
 <!--                                    <i-col span="2" class="big-blank">-->
@@ -187,11 +190,14 @@
     </div>
 </template>
 <script>
-
     import customerView from "../../services/datacenter/customerView";
+    import countTo from 'vue-count-to';
 
     export default {
         inject: ['setMenuName'],
+        components: {
+            countTo
+        },
         data() {
             return {
                 userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
@@ -243,7 +249,13 @@
                         {'date': '1/1', '新增好友': 30, '新增好友(去重)': 25},
                     ]
                 },
-                timer: null
+                timer: null,
+                startVal: 0,
+                endVal: 0,
+                lastVal: 0,
+                startVal2: 0,
+                endVal2: 0,
+                lastVal2: 0
             }
         },
         computed: {
@@ -409,6 +421,8 @@
             },
             getAllCount: function(){
                 let that = this;
+                that.lastVal = that.startVal;
+
                 customerView.getAllCount({
                     userId: this.userId
                 },function (data) {
@@ -418,6 +432,8 @@
                     data = data.data.results;
                     that.customerViewVO.allCustomer = data.allCustomer;
                     that.customerViewVO.allValidCustomer = data.allValidCustomer;
+                    that.endVal = data.allCustomer;
+
                 });
             },
             /**mainList*/
@@ -430,6 +446,8 @@
                     endTime: this.endTime
                 };
                 let that = this;
+
+                that.lastVal2 = that.startVal2;
                 customerView.getMainRequest(request, function (data) {
                     if (data.data.code !== "0000") {
                         that.$Message.error("系统异常");
@@ -437,6 +455,8 @@
                     data = data.data.results;
                     // that.customerViewVO = data;//数据部分没刷新
                     that.customerViewVO.newCustomer = data.newCustomer;
+                    that.endVal2 = data.newCustomer;
+
                     that.customerViewVO.newValidCustomer = data.newValidCustomer;
                     that.customerViewVO.customerList = data.customerList;
                     that.customerViewVO.validCustomerList = data.validCustomerList;