jQuery火箭图标返回顶部代码

首先来看一下网站效果，想写这个项目的读者可以自行下载哦，地址：https://github.com/Stray-Kite/Car：

在这个项目中，我们主要是为了学习语种切换，也就是右上角的 中文/English 功能的实现。

首先看一下模拟的后台数据src/config/modules/lang.js 文件中:

关键代码：

export default {
  name: 'Homepage',
  components: {
    ScrollNumber
  },
  data () {
    return {
      lang: 'chinese',
      pageIndex: 0,
      stepIndex: 0
    }
  },
  ......其余代码 44   methods: {
    addClass (el, _class) {177     //切换语言
    toggleLang (lang) {
      this.lang = lang
      // this.animatePage()
    }
  },
  //以下几个computed是获取config文件夹里的数据
  computed: {
    langs () {
      return config.langs[this.lang]  //主要靠这里切换，这个切换的本质其实就是使用了另一套英文的数据（换了一套后台数据）
    },
    ......其余代码198   }
}

 最后给大家一波儿带注解的代码，方便理解：

Homepage.vue(CSS我就不给啦，因为这东西看着学一下就好):

<template>
  <div class="container">


    <div class="rc-header">
      <!--首先这是两个切换语言的按钮（中文/English）-->
      <div class="rc-header-right">
        <a href="#" :class="{'is-active': this.lang === 'chinese'}" @click="toggleLang('chinese')">中文</a>&nbsp;/
        <a href="#" :class="{'is-active': this.lang === 'english'}" @click="toggleLang('english')">English</a>
      </div>
     <!--顶栏其他的元素，图片等...-->
      <div class="rc-header-left">
        <img class="rc-logo" :src="media.LOGO_PATH">
        <img class="rc-slogan" :src="media.SLOGAN_PATH">
      </div>
    </div>

    <!--下面就是整个内容页了，大的来说这四页就是一个大的竖着的轮播图，用了vue的swiper-->
    <div class="swiper-container rc-body">
      <div class="swiper-wrapper">

        <!--第一页-->
        <div class="swiper-slide">
          <div class="rc-page rc-page01">
            <!--星空和车-->
            <div class="rc-galaxy">
              <div class="rc-bg rc-layer-bg" ref="plbo"
                          :style="{backgroundImage: 'url(' + common.GALAXY_LAYER_BG + ')', top: layerEdge, bottom: layerEdge, left: layerEdge, right: layerEdge}">
            </div>
              <div class="rc-bg rc-layer-top" ref="plto"
                   :style="{backgroundImage: 'url(' + common.GALAXY_LAYER_TOP + ')'}">
              </div>
            </div>

            <div class="rc-content-wrapper">
              <!--若是第一页，即index=0，则显示，否则隐藏-->
              <div class="rc-text-wrapper" ref="ptwo"
                   :style="{visibility: pageIndex === 0 ? 'visible' : 'hidden'}" >
                <h2>{{langs.PAGE_ONE_SLOGAN}}</h2>
                <!--scroll-number是数字增加，引入widgets/ScrollNumber.vue的方法-->
                <scroll-number :size="isMobile ? 18 : 24" ref="psno">
                  <span slot="suffix" style="color: #c3c3c3;">{{langs.PAGE_ONE_SUB_SLOGAN}}</span>
                </scroll-number>
              </div>
              <button class="btn btn-success btn-try"
                      :style="{visibility: pageIndex === 0 ? 'visible' : 'hidden'}"
                      ref="pbro">{{langs.TRY_LABEL}}</button>
            </div>

            <!--下面这两个img不用管，已经隐藏啦-->
            <img :src="common.GALAXY_REAL_TOP" v-show="false">
            <img :src="common.GALAXY_REAL_BG" v-show="false">
          </div>
        </div>

        <!--第二页-->
        <div class="swiper-slide">
          <div class="rc-page rc-page02">
            <div class="rc-content-wrapper">
              <div
                class="rc-text-wrapper"
                :style="{visibility: pageIndex === 1 ? 'visible' : 'hidden'}"
                ref="ptwt">
                <h2>{{langs.PAGE_TWO_SLOGAN}}</h2>
              </div>
              <div class="rc-step-wrapper">
                <div class="rc-step-stage">
                  <div class="swiper-container rc-step-container">
                    <div class="swiper-wrapper">
                      <div
                        v-for="(step, index) in langs.STEPS_PROFILE"
                        :key="index"
                        class="swiper-slide rc-step">
                        <div class="rc-step-content">
                          <h2 class="rc-step-title">{{langs.STEP_LABEL}} {{index + 1}}</h2>
                          <p class="rc-step-profile">{{step}}</p>
                          <button
                            class="btn"
                            ref="pbdt"
                            v-if="index === 0">{{langs.DOWNLOAD_LABEL}}</button>
                          <button
                            class="btn"
                            ref="pbat"
                            v-if="index === 1">{{langs.AUTH_LABEL}}</button>
                        </div>
                      </div>
                    </div>
                    <div class="swiper-scrollbar"></div>
                    <div class="swiper-button-next" v-if="!isMobile"></div>
                    <div class="swiper-button-prev" v-if="!isMobile"></div>
                  </div>
                </div>
                <!--步骤右面的图片-->
                <div class="rc-step-scene" v-if="!isMobile">
                  <div
                    :style="{backgroundImage: 'url(' + media.STEPS_ACTOR_PATH[stepIndex] + ')'}"
                    class="rc-bg rc-step-actor"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--第三页-->
        <div class="swiper-slide">
          <div class="rc-page rc-page03">
            <div class="rc-content-wrapper">
              <div
                class="rc-text-wrapper"
                :style="{visibility: pageIndex === 2 ? 'visible' : 'hidden'}"
                ref="ptwth">
                <h2>{{langs.PAGE_THREE_SLOGAN}}</h2>
              </div>
              <div class="rc-cars-gallery">
                <div
                  v-for="(car, index) in langs.CARS_PROFILE"
                  :key="index"
                  class="rc-car">
                  <div class="rc-car-card" :title="langs.CARS_TOOLTIP">
                    <div class="rc-car-media">
                      <div
                        :style="{backgroundImage: 'url(' + common.CARS_PATH[index] + ')'}"
                        class="rc-bg rc-bg-scale rc-car-snapshot"></div>
                    </div>
                    <div class="rc-car-profile">
                      <h4>{{car.NAME}}</h4>
                      <div>{{langs.OWNER_LABEL}}:&nbsp;{{car.OWNER}}</div>
                      <div>{{langs.DATE_LABEL}}:&nbsp;{{car.DATE}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--第四页-->
        <div class="swiper-slide">
          <div class="rc-page rc-page04">
            <div
              class="rc-text-wrapper"
              :style="{visibility: pageIndex === 3 ? 'visible' : 'hidden'}"
              ref="ptwf">
              <h2>{{langs.PAGE_FOUR_SLOGAN}}</h2>
            </div>
            <div class="rc-content-wrapper">
              <div class="rc-bg rc-drive-stage">
                <div
                  :style="{backgroundImage: 'url(' + common.DRIVE_STAGE_ACTOR + ')'}"
                  class="rc-bg rc-actor-car" ref="pdcf"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination" v-show="!isMobile"></div>
    </div>
  </div>
</template>

<script>
  /* eslint-disable */
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css'
  import 'animate.css/animate.min.css'
  import config from '../config'
  import ScrollNumber from '@/widgets/ScrollNumber.vue'
  export default {
    name: 'Homepage',
    components: {
      ScrollNumber
    },
    data () {
      return {
        lang: 'chinese',
        pageIndex: 0,
        stepIndex: 0
      }
    },
    beforeCreate () {
      /**
       * 旋转星空
       *  step 3: 计算可视区域对角线, 根据对角线长度撑开容器
       */
      let w = document.body.clientWidth
      let h = document.body.clientHeight
      this.layerEdge = 'calc(50% - ' + Math.ceil(Math.sqrt(w * w + h * h) / 2) + 'px)'
    },
    mounted () {
      this.$nextTick(function () {
        let _self = this
        /* eslint-disable no-new */
        new Swiper('.rc-body', {
          speed: 800,
          direction: 'vertical',
          paginationClickable: true,
          mousewheel: true,
          pagination: {
            el: '.swiper-pagination'
          },
          on: {
            slideChangeTransitionEnd () {
              _self.pageIndex = this.activeIndex
              _self.animatePage()
            }
          }
        })
        this.initPage()
      })
    },
    methods: {
      addClass (el, _class) {
        let elClassArr = el.className.split(' ') //用单个空格分割
        let classArr = _class.split(' ')         //同上
        classArr.forEach(item => {
          // 如果elClassArr中没有这个元素（类型），那么添加进去
          if (elClassArr.indexOf(item) === -1) {
            elClassArr.push(String(item))
          }
        })
        //添加完后本属性后面要有一个空格隔开
        el.className = elClassArr.join(' ')
        return el
      },
      removeClass (el, _class) {
        let elClassArr = el.className.split(' ')
        let classArr = _class.split(' ')
        classArr.forEach(item => {
          let index = elClassArr.indexOf(item)
          if (index > -1) {
            elClassArr.splice(index, 1)
          }
        })
        el.className = elClassArr.join(' ')
        return el
      },
      bindAnimation (el, x) {
        let _self = this
        // 监听动画结束事件
        let events = [
          'webkitAnimationEnd',
          'mozAnimationEnd',
          'MSAnimationEnd',
          'oanimationend',
          'animationend'
        ]
        _self.addClass(el, x + ' animated')
        events.forEach(event => {
          let func = function () {
            events.forEach(item => {
              el.removeEventListener(item, func)
            })
            _self.removeClass(el, x + ' animated')
          }
          //增加事件监听，如果时间结束，那么再利用fun函数移除监听的事件和添加进来的新类（class属性）
          el.addEventListener(event, func)
        })
      },
      initPage01 () {
        setTimeout(() => {
          /**
           * 旋转星空
           *  step 4: 采用真实图片替换代理图片
           */
          this.$refs.plto.style.backgroundImage = 'url(' + this.common.GALAXY_REAL_TOP + ')'
          this.$refs.plbo.style.backgroundImage = 'url(' + this.common.GALAXY_REAL_BG + ')'
        }, 2000)
        this.animatePage01() //动画效果(数字上升)
      },
      //第二页
      initPage02 () {
        let _self = this
        let pbdt = this.$refs.pbdt[0]
        let pbat = this.$refs.pbat[0]
        let bindAnimation = this.bindAnimation
        new Swiper('.rc-step-container', {
          speed: 600,
          scrollbar: {
            el: '.swiper-scrollbar',
            draggable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          on: {
            slideChangeTransitionEnd () {
              if (this.activeIndex === 0) {
                bindAnimation(pbdt, 'tada')
              } else if (this.activeIndex === 1) {
                bindAnimation(pbat, 'tada')
              }
              _self.stepIndex = this.activeIndex
            }
          }
        })
      },
      initPage03 () {},
      initPage04 () {},

      //初始化四个界面方法
      initPage () {
        this.initPage01()
        this.initPage02()
        this.initPage03()
        this.initPage04()
      },

      animatePage01 () {
        this.bindAnimation(this.$refs.ptwo, 'fadeIn')
        this.bindAnimation(this.$refs.pbro, 'fadeIn')
        this.$refs.psno.$emit('start')
      },
      animatePage02 () {
        this.bindAnimation(this.$refs.ptwt, 'fadeInDown')
      },
      animatePage03 () {
        this.bindAnimation(this.$refs.ptwth, 'flipInY')
      },
      animatePage04 () {
        this.bindAnimation(this.$refs.ptwf, 'jackInTheBox')
        setTimeout(() => {
          this.bindAnimation(this.$refs.pdcf, 'rc-arrive')
        }, 600)
      },
      // QA: 函数本是对象
      animatePage (index) {
        [
          this.animatePage01,
          this.animatePage02,
          this.animatePage03,
          this.animatePage04
        ][index || this.pageIndex]()
      },
      //切换语言
      toggleLang (lang) {
        this.lang = lang
        // this.animatePage()
      }
    },
    //以下几个computed是获取config文件夹里的数据
    computed: {
      langs () {
        return config.langs[this.lang]
      },
      media () {
        return config.media[this.lang]
      },
      common () {
        return config.common
      },
      // 判断移动端，无需记住，会用就好，返回值为bool值
      isMobile () {
        return 这个就不给了，这个直接用就好了355       }
    }
  }
</script>

<style scoped>
</style>

widgets/ScrollNumber.vue（数字增长）:

<template>
  <div class="scroll-number" :style="{fontSize: size + 'px'}">
    <slot name="prefix"></slot>
    <span class="number">{{value}}</span>
    <slot name="suffix"></slot>
  </div>
</template>

<script>
import TWEEN from 'tween.js'
export default {
  name: 'ScrollNumber',
  data () {
    return {
      value: 0,
      animation: null
    }
  },
  props: {
    total: {
      type: Number,
      default: 15374
    },
    size: {
      type: Number,
      default: 24
    }
  },
  mounted () {
    this.$nextTick(function () {
      const animate = function (time) {
        requestAnimationFrame(animate)
        TWEEN.update(time)
      }
      requestAnimationFrame(animate)
      let _self = this
      // 增长起始值，从0开始
      let surface = {value: 0}
      // 增加从0增长到total动画1600为时间
      this.animation = new TWEEN.Tween(surface).to({value: _self.total}, 1600)
      this.animation.easing(TWEEN.Easing.Exponential.Out).onUpdate(() => {
        _self.value = Math.floor(surface.value)
      })
      // 监听父组件通讯事件
      this.$on('start', () => {
        surface.value = 0
        this.animation.start()
      })
    })
  }
}
</script>

<style scoped>
  .number {
    display: inline-block;
    min-width: 40px;
    color: orangered;
    text-align: center;
    font-weight: 600;
  }
</style>

注：其中TWEEN的用法我找到了一篇比较不错的文章，地址：https://www.jianshu.com/p/164538a89939