前言
文章概述:返回顶部组件的封装。
一、组件封装
返回顶部的组件在项目的其他地方也会用到,所以我们需要将它封装到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网络请求的数据。
总结
返回顶部组件相对简单,但是在项目开发中这是一个必不可少的功能。