在pc端，页面超过可视区高度后便会有滚动条，那么回到顶部的功能就必不可少了。
现在我面临的情况：
1、点击回到顶部，默认隐藏，滚动超过一定距离才显示回到顶部icon
2、部分页面不需要回到顶部功能，比如登录、修改密码等模块；
3、滚动效果的实现使用的是element-ui的scrollbar组件，看了下源码，并没有向外派发任何事件，仅仅实现了滚动效果，不提供诸如下拉刷新、回到顶部、返回滚动距离等api，所以只能用其它方法监控滚动事件；
组件可以展示在每个页面上，但是滚动事件是属于每个页面的，互不关联，所以必须给每个页面绑定各自的滚动事件和回到顶部事件，事件无法共用。
思路一：
每个需要展示的页面引入backTop组件，并注册onscroll事件和goToTop事件，通过页面自己来控制backTop的显示隐藏。
但是这样的话就太冗余了，有n个页面的话，就需要复制粘贴n次，不够简洁。
思路二：
做一个路由-id对照表，切换到相应的页面时才给该页面的滚动主题绑定事件，这样就可以共用方法了。
扫描二维码关注公众号，回复：
9009546 查看本文章
实现方法：
1、既然各个页面都会用到，肯定要做成一个公共组件
2、有些页面显示，有些不显示，通过router的meta配置
3、显示、隐藏通过vuex状态控制实现
4、组件引入位置放在App.vue上，这样可以保证所有页面都能显示
5、在mixins里监听滚动事件，判断滚动距离
6、回到顶部事件放在组件里
代码：
FixedSide.vue
<template>
<div class="fixed-side" v-show="this.$store.state.showFixedSide">
<ul class="icon-list">
<li class="icon-item" @click="scrollToTop">
<img :src="icons.backToTop" alt="返回顶部">
</li>
</ul>
</div>
</template>
<script>
export default {
data() {},
methods: {
scrollToTop() {
let scrollId = this.$route.meta.scrollId;
$("#" + scrollId + "").find(".el-scrollbar__wrap").animate({ scrollTop: 0 }, "slow");
}
}store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
showFixedSide: false
}
});router.js
meta: {
name: "签章日志",
showFixedSide: true, // 是否在该页面显示组件
scrollId: "statisticalId" // 该页面对应的scrillid
}对应vue页面：
<template>
<div id="statisticalId">
<el-scroll></el-scroll>
</div>
</template>mixin.js
export const scrollShow = {
mounted() {
let id = this.$route.meta.scrollId;
let that = this;
$("#" + id + "").find(".el-scrollbar__wrap").on("scroll", function(e) {
let scrollTop = e.currentTarget.scrollTop;
if (scrollTop > 300) {
that.$store.state.showFixedSide = true;
}else {
that.$store.state.showFixedSide = false;
}
});
}
};最后只需要在要显示该组件的页面引入即可：
<script>
import { scrollShow } from "@/mixins/mixin";
export default {
mixins: [scrollShow]
}
</script>