添加数字过度效果

src/components/number/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <span :company="after">
+    {{icount}}
+  </span>
+</template>
+
+<script>
+export default {
+  props: {
+    after: {
+      default: ''
+    },
+    count: {
+      default: 0,
+      type: Number
+    },
+    start: {
+      default: true
+    }
+  },
+  data () {
+    return {
+      icount: this.count
+    }
+  },
+  mounted () {
+    var countStr = this.count.toString()
+    var startNum = Number(countStr[0] - 1 + countStr.slice(1))
+
+    if (this.count - startNum < 100) {
+      startNum = 0
+    }
+
+    this.endNum = this.icount
+    this.icount = startNum
+    this.interval = Math.ceil((this.endNum - startNum) / 100)
+    this.excessive = this.excessive.bind(this)
+    this.start && this.excessive()
+  },
+  methods: {
+    excessive () {
+      if (this.icount === this.endNum) {
+        return
+      }
+      this.icount += this.interval
+      requestAnimationFrame(this.excessive)
+    }
+  },
+  watch: {
+    start (newVal) {
+      newVal && this.excessive()
+    }
+  }
+}
+</script>
+
+<style scoped>
+span::after {
+  content: attr(company);
+}
+</style>

src/components/wave/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <div ref="layout">
-
-  </div>
+  <div ref="layout"></div>
 </template>
 
 <script>

src/page/home1/index.vue

@@ -158,13 +158,13 @@
       </div>
     </div>
 
-    <div class="plate05">
+    <div class="plate05" ref="numcount">
       <img src="@/assets/images/index_img_record_bg.png" class="bg">
       <div class="info">
         <h2 class="b-title">每个空间，都值得被记录</h2>
         <div class="count-group">
           <div v-for="(item, i) in countGroup" :key="i">
-            <span>{{item.count}}</span>
+            <number after="%" :count="item.count" :start="startNumCount"></number>
             <p v-html="item.text"></p>
           </div>
         </div>
@@ -207,14 +207,16 @@ import vcenter from '@/components/vcenter'
 import lselect from '@/components/lselect'
 import tabs from '@/components/tabs'
 import wave from '@/components/wave'
+import number from '@/components/number'
+import { getPosition } from '@/util'
 
 export default {
   data () {
     let countGroup = [
-      {text: '详情页浏览<br>提升', count: '75%'},
-      {text: '人均停留<br>增长', count: '318%'},
-      {text: '人均浏览<br>增长', count: '180%'},
-      {text: '房源约看<br>增长', count: '138%'}
+      {text: '详情页浏览<br>提升', count: 75},
+      {text: '人均停留<br>增长', count: 318},
+      {text: '人均浏览<br>增长', count: 180},
+      {text: '房源约看<br>增长', count: 138}
     ]
     let reports = [
       {
@@ -264,10 +266,25 @@ export default {
     return {
       countGroup,
       reports,
-      items
+      items,
+      startNumCount: false
     }
   },
-  components: {lselect, tabs, vcenter, slide, wave}
+  mounted () {
+    this.sizeHandle = () => {
+      let y = getPosition(this.$refs.numcount).y + this.$refs.numcount.offsetHeight
+      if (window.innerHeight + window.scrollY > y) {
+        this.startNumCount = true
+        window.removeEventListener('scroll', this.sizeHandle)
+      }
+    }
+
+    window.addEventListener('scroll', this.sizeHandle)
+  },
+  destroyed () {
+    window.removeEventListener('scroll', this.sizeHandle)
+  },
+  components: {lselect, tabs, vcenter, slide, wave, number}
 }
 </script>
 

src/page/videos/index.vue

@@ -38,22 +38,7 @@
 </template>
 
 <script>
-
-/**
- * 获取一个元素在指定父元素或文档中的位置
- */
-function getPosition (dom, parent) {
-  var ret = {
-    x: 0,
-    y: 0
-  }
-  while (dom && dom !== parent && dom !== document.documentElement) {
-    ret.x += dom.offsetLeft
-    ret.y += dom.offsetTop
-    dom = dom.offsetParent
-  }
-  return ret
-}
+import { getPosition } from '@/util'
 
 export default {
   data () {

src/util/index.js

@@ -0,0 +1,12 @@
+export function getPosition (dom, parent) {
+  var ret = {
+    x: 0,
+    y: 0
+  }
+  while (dom && dom !== parent && dom !== document.documentElement) {
+    ret.x += dom.offsetLeft
+    ret.y += dom.offsetTop
+    dom = dom.offsetParent
+  }
+  return ret
+}