vue公共组件之回到顶部组件

vue公共组件之回到顶部组件

今天在看PSD图时，发现图片右下角有一个包含向上箭头的小图标，点击这个图标，马上返回页面顶部。这个小图标引起了我的兴趣，有几种实现方式？能否抽取成公共组件，在整个项目中使用呢？马上开干！

技术栈

1. vue2.5框架
2. webpack3.6
3. es6/7
4. tween.js
5. animation.js
6. element-ui
7. font-awesome
8. EventUtil

实现方式：

共用2种实现方式，通过css实现，通过js实现

设计图标样式

/*回到顶部标识*/
.utils-sticky-btns.scrolled{
    right: 3px;
}
.utils-sticky-btns{
    position: fixed;
    z-index: 50;
    right: -48px;
    bottom: 10px;
    -webkit-transition: right .3s ease;
    transition: right .3s ease;
}

.utils-sticky-btns a{
    text-decoration: underline;
    color: #ff712c;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.utils-sticky-btns span{
    display: block;
    float: left;
    width: 42px;
    height: 42px;
    text-align: center;
    font-size: 1.25em;
    color: #fff;
    background: #ff712c;
    border-radius: 4px;
    padding-top: 6px;
    margin: 0 5px;
    cursor: pointer;
    -webkit-transition: background .3s ease;
    transition: background .3s ease;
}

.utils-sticky-btns span:hover{
    background: #f85100;
}

回到顶部组件

<!--
    path: src/components/practical/scrollTop.vue
    author: wujiang
    time: 2018/4/12
    desc: 回到顶部组件
-->
<template>
    <section>
        <section :class="['utils-sticky-btns', {'scrolled': showGoTop}]">
            <a href="#" @click="goTop($event)">
                <span>
                    <i class="fa fa-chevron-up fa-2x" aria-hidden="true"></i>
                </span>
            </a>
        </section>
    </section>
</template>

<script>
export default {
    props: {
        /*
         * 返回顶部可用参数
         */
        scrollParam: {
            type: Object,
            default () {
                return {
                    // 回到顶部的方式 0 - 马上回到顶部，css实现（默认） 1 - 匀速回到顶部，js实现
                    way: 0,
                    // 滚动多少像素显示“回到顶部”图标
                    distance: 20,
                    // 向上滚动间隔
                    time: 600,
                    // 运动方式
                    sportWay: 'Quad',
                    // 缓急方式
                    slowWay: 'easeIn',
                    // 回到顶部后回调方法
                    callback: undefined
                }
            }
        }
    },
    data () {
        return {
            // 操作element的方法
            elUtils: this.$util.element,
            // 操作event的方法
            evUtils: this.$util.event,
            // 是否展示“回到顶部”图标
            showGoTop: false
        }
    },
    computed: {
    },
    mounted () {
        this.computeScroll()
    },
    methods: {
        // 回到顶部
        goTop (e) {
            let self = this
            e = self.evUtils.getEvent(e)
            if (self.scrollParam.way === 0) {
                return
            }
            let sp = self.scrollParam
            self.evUtils.preventDefault(e)
            self.elUtils.constantSpeedToTop(self.elUtils.getDomScrollTop(), sp.time, sp.sportWay, sp.slowWay, sp.callback)
        },
        // 计算滚动条位置
        computeScroll () {
            let self = this
            self.evUtils.addHandler(window, 'scroll', function () {
                self.showGoTop = self.elUtils.getDocScrollTop() >= self.scrollParam.distance
            })
        }
    }
}
</script>

用于测试的组件

<!--
    path:
    author: wujiang
    time:
    desc:
-->
<template>
    <section>
        <section class="test-scroll">
            <h1>回到顶部图标测试组件</h1>
            <!-- 组件：回到顶部 -->
            <scroll-top :scrollParam="scroll"></scroll-top>
        </section>
    </section>
</template>

<script>
import scrollTop from 'components/practical/scrollTop'

export default {
    components: {
        // “回到顶部”组件
        scrollTop
    },
    data () {
        return {
            // 回到顶部参数
            scroll: {
                // 回到顶部的方式 0 - 马上回到顶部，css实现（默认） 1 - 匀速回到顶部，js实现
                way: 1,
                // 滚动多少像素显示“回到顶部”图标
                distance: 20,
                // 向上滚动间隔
                time: 600,
                // 运动方式 Bounce
                sportWay: 'Quad',
                // 缓急方式 easeInOut
                slowWay: 'easeIn',
                // 回到顶部后回调方法
                callback: this.onScollTop
            }
        }
    },
    computed: {
    },
    mounted () {
    },
    methods: {
        // 回到顶部后回调
        onScollTop () {
            this.$message.info('到达页面顶部了')
        }
    }
}
</script>

最终效果