商品列表页：新增回到顶部功能

htmldev/cps/src/views/category/index/index.vue

@@ -79,12 +79,17 @@
       :catId="catId"
       @setShowHeader="setShowHeader"
       ref="myMain"/>
+    <!--回到顶部-->
+    <BSScrollTop
+      @handleScrollTop="handleScrollTop"
+      v-show="!showHeader"/>
   </div>
 </template>
 
 <script>
 import { Tab, Tabs, DropdownMenu, DropdownItem, Icon, Toast, Search } from 'vant'
 import Main from './child/main'
+import BSScrollTop from '../../common/BSScrollTop'
 import { apiCateList } from './api/api'
 
 export default {
@@ -96,7 +101,8 @@ export default {
     'van-dropdown-item': DropdownItem,
     'van-icon': Icon,
     'van-search': Search,
-    Main
+    Main,
+    BSScrollTop
   },
   data () {
     return {
@@ -181,6 +187,9 @@ export default {
     },
     setShowHeader (val) {
       this.showHeader = val
+    },
+    handleScrollTop () {
+      this.$refs.myMain.scroll && this.$refs.myMain.scroll.scrollTo(0, 0)
     }
   },
   beforeRouteLeave (to, from, next) {
@@ -205,11 +214,11 @@ export default {
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: all 1s;
+  transition: all 0.6s;
 }
 
 .fade-enter,
-.fade-leave-active {
+.fade-leave-to {
   transform: translate3d(0, -136px, 0);
 }
 

htmldev/cps/src/views/common/BSScrollTop/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <a
+    class="scroll-top"
+    href="javascript:;"
+    @click="$emit('handleScrollTop')">
+    <van-icon
+      :color="'#333'"
+      name="arrow-up"/>
+  </a>
+</template>
+
+<script>
+import { Icon } from 'vant'
+
+export default {
+  name: 'index',
+  components: {
+    'van-icon': Icon
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.scroll-top {
+  position: absolute;
+  bottom: 20px;
+  right: 10px;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 0 10px 0 #ccc;
+
+  ::v-deep .van-icon {
+    font-size: 30px;
+  }
+}
+</style>