Vue实战商城项目（九）—— 返回顶部组件封装

---

前言

文章概述：返回顶部组件的封装。

---

一、组件封装

返回顶部的组件在项目的其他地方也会用到，所以我们需要将它封装到components目录下的content目录中。

代码如下（示例）：

<template>
    <div class="back-top">
      <img src="~assets/img/common/top.png" alt="">
    </div>
</template>

<script>
    export default {
        name: "BackTop"
    }
</script>

<style scoped>
.back-top{

  position: fixed;
  bottom: 47px;
  right: 7px;
  z-index: 10;
}
  .back-top img{
    width: 43px;
    height: 43px;
  }

</style>

一、功能实现

在home中导入组件，注意：在给组件绑定点击事件是需要在@click后面加上.native

代码如下（示例）：

<back-top @click.native="BackClick" v-show="isShowBackTop"></back-top>

点击返回顶部

代码如下（示例）：

        BackClick(){
            this.$refs.scroll.ScrollTo(0,0)
        },

返回顶部按钮并不是一开始就显示的，而是滚动到某一位置时显示（根据实际情况设定显示的位置），所以我们给backTop一个v-show=“isShowBackTop”，isShowTabControl的根据滚动条位置改变。

该处使用的url网络请求的数据。

---

总结

返回顶部组件相对简单，但是在项目开发中这是一个必不可少的功能。