百度商桥、返回顶部

components/goTop.vue

+
+<template>
+  <div id="goTop">
+    <img
+      v-show="goTopShow"
+      src="data:image/png;base64,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"
+      class="show-go-top"
+      @click="goTop"
+    >
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        scrollTop: "",
+        goTopShow: false
+      };
+    },
+    watch: {
+      scrollTop(val) {
+        if (this.scrollTop > 500) {
+          this.goTopShow = true;
+        } else {
+          this.goTopShow = false;
+        }
+      }
+    },
+    created(){
+      if (typeof window !== 'undefined') {
+        window.addEventListener('scroll', this.handleScroll);
+      }
+    },
+    destroyed() {
+      window.removeEventListener("scroll", this.handleScroll);
+    },
+    methods: {
+      handleScroll() {
+        this.scrollTop =
+          window.pageYOffset ||
+          document.documentElement.scrollTop ||
+          document.body.scrollTop;
+        if (this.scrollTop > 500) {
+          this.goTopShow = true;
+        }
+      },
+      goTop() {
+        let timer = null,
+          _that = this;
+        cancelAnimationFrame(timer);
+        timer = requestAnimationFrame(function fn() {
+          if (_that.scrollTop > 0) {
+            _that.scrollTop -= 50;
+            document.body.scrollTop = document.documentElement.scrollTop =
+              _that.scrollTop;
+            timer = requestAnimationFrame(fn);
+          } else {
+            cancelAnimationFrame(timer);
+            _that.goTopShow = false;
+          }
+        });
+      }
+    },
+  };
+</script>
+
+<style scoped>
+  .show-go-top{
+    position: fixed;
+    right: 0px;
+    bottom: 80px;
+    width: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9;
+  }
+</style>

nuxt.config.js

@@ -42,7 +42,8 @@ module.exports = {
   plugins: [
     { src: '~plugins/mint-ui' },
     { src: '~assets/styles/base.scss' },
-    { src: '~plugins/filters.js', srr: false }
+    { src: '~plugins/filters.js', srr: false },
+    { src: '~/plugins/baidu.js', srr: true },
   ],
   env: {
       host:env[process.env.MODE].ENV_API

pages/aboutXx.vue

@@ -13,6 +13,8 @@
       @next="next"
       @change="changeBanner"
       @click="bannerClick"/>
+    <go-top/>
+    <footer/>
   </div>
 </template>
 
@@ -25,12 +27,13 @@
   import {
     mapGetters
   } from "vuex";
-
+  import GoTop from "~/components/goTop";
   export default {
     components: {
       Footer,
       Head,
-      SecondBanner
+      SecondBanner,
+      GoTop
     },
     data(){
       return{};

pages/activity.vue

@@ -42,6 +42,7 @@
     <p
       v-if="touchend"
       class="empty_data">——没有更多了——</p>
+    <go-top/>
     <Footer v-if="touchend"/>
   </div>
 </template>
@@ -55,12 +56,13 @@
   import {
     mapGetters
   } from "vuex";
-
+  import GoTop from "~/components/goTop";
   export default {
     components: {
       Footer,
       Head,
-      SecondBanner
+      SecondBanner,
+      GoTop
     },
     data(){
       return{

pages/campsite.vue

@@ -39,6 +39,7 @@
     <p
       v-if="touchend"
       class="empty_data">——没有更多了——</p>
+    <go-top/>
     <Footer v-if="touchend"/>
   </div>
 </template>
@@ -52,12 +53,13 @@
   import {
     mapGetters
   } from "vuex";
-
+  import GoTop from "~/components/goTop";
   export default {
     components: {
       Footer,
       Head,
-      SecondBanner
+      SecondBanner,
+      GoTop
     },
     data(){
       return{

pages/index.vue

@@ -145,6 +145,7 @@
         class="tour-more-home"
         @click="$router.push('/news')">查看更多>></div>
     </div>
+    <go-top/>
     <Footer/>
   </div>
 </template>
@@ -158,12 +159,13 @@
   import {
     getHomeData
   } from "~/assets/services/common";
-
+  import GoTop from "~/components/goTop";
   export default {
     components: {
       Head,
       Footer,
-      ShopList
+      ShopList,
+      GoTop
     },
     data() {
       return {

pages/news.vue

@@ -27,6 +27,7 @@
     <p
       v-if="touchend"
       class="empty_data">——没有更多了——</p>
+    <go-top/>
     <Footer v-if="touchend"/>
   </div>
 </template>
@@ -39,11 +40,12 @@
   import {
     mapGetters
   } from "vuex";
-
+  import GoTop from "~/components/goTop";
   export default {
     components: {
       Footer,
-      Head
+      Head,
+      GoTop
     },
     data(){
       return{

pages/tour.vue

@@ -39,6 +39,7 @@
     <p
       v-if="touchend"
       class="empty_data">——没有更多了——</p>
+    <go-top/>
     <Footer v-if="touchend"/>
   </div>
 </template>
@@ -52,12 +53,13 @@
   import {
     mapGetters
   } from "vuex";
-
+  import GoTop from "~/components/goTop";
   export default {
     components: {
       Footer,
       Head,
-      SecondBanner
+      SecondBanner,
+      GoTop
     },
     data(){
       return{

pages/vehicle.vue

@@ -60,6 +60,7 @@
     <p
       v-if="touchend"
       class="empty_data">——没有更多了——</p>
+    <go-top/>
     <Footer v-if="touchend"/>
   </div>
 </template>
@@ -73,12 +74,13 @@
   import {
     mapGetters
   } from "vuex";
-
+  import GoTop from "~/components/goTop";
   export default {
     components: {
       Footer,
       Head,
-      SecondBanner
+      SecondBanner,
+      GoTop
     },
     data(){
       return{

pages/vehicleDetail/index.vue

@@ -173,6 +173,7 @@
         </div>
       </div>
     </div>
+    <go-top/>
   </div>
 </template>
 
@@ -180,11 +181,13 @@
   import axios from '../../plugins/axios'
   import Head from "~/components/head";
   import DetailBanner from '~/components/detailBanner'
+  import GoTop from "~/components/goTop";
 
   export default {
     components: {
       Head,
-      DetailBanner
+      DetailBanner,
+      GoTop
     },
     data() {
       return {

plugins/baidu.js

+var _hmt = _hmt || [];
+if (typeof window !== 'undefined') {
+  (function() {
+    var hm = document.createElement("script");
+    hm.src = "https://hm.baidu.com/hm.js?672a607e77e242a0b9a090f5aaab7f33";
+    var s = document.getElementsByTagName("script")[0];
+    s.parentNode.insertBefore(hm, s);
+  })();
+}
+