yangc пре 8 година
родитељ
комит
7cabf390e6
1 измењених фајлова са 39 додато и 0 уклоњено
  1. 39 0
      components/mobile/MobileFooter.vue

+ 39 - 0
components/mobile/MobileFooter.vue

@@ -15,15 +15,40 @@
         <i :class="activeType=='user'?'iconfont icon-icon':'iconfont icon-wo'"></i><p>我</p>
       </nuxt-link>
     </span>
+    <a @click="toTop" v-show="!hideToTop"><i class="iconfont icon-arrow-up icon-xlg"></i></a>
   </div>
 </template>
 <script>
+  import { scrollTo } from '~utils/scroll'
   export default{
     name: 'MobileFooter',
+    data () {
+      return {
+        hideToTop: true
+      }
+    },
     computed: {
       activeType () {
         return this.$route.path === '/' ? 'home' : this.$route.path === '/mobile/shop' ? 'shops' : this.$route.path === '/mobile/user' ? 'user' : ''
       }
+    },
+    mounted: function () {
+      this.$nextTick(function () {
+        window.addEventListener('scroll', this.onScroll)
+      })
+    },
+    methods: {
+      onScroll () {
+        let scrolled = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
+        if (scrolled > 0) {
+          this.hideToTop = false
+        } else {
+          this.hideToTop = true
+        }
+      },
+      toTop () {
+        scrollTo('body', 300)
+      }
     }
   }
 </script>
@@ -60,4 +85,18 @@
   .mobile-footer span.active a{
     color:#3976f4;
   }
+  .mobile-footer >a {
+    position: absolute;
+    right: .1rem;
+    top: -1rem;
+    background: #3e82f5;
+    color: #fff;
+    width: .88rem;
+    height: .88rem;
+    line-height: .88rem;
+    border-radius: .05rem;
+  }
+  .mobile-footer >a i{
+    font-size: .46rem;
+  }
 </style>