• BackTop 返回顶部
    • 概述
    • 代码示例
    • API
      • BackTop props
      • BackTop events

    BackTop 返回顶部

    概述

    当页面内容冗长,需要快捷返回顶部时使用,一般放置在页面右下角位置。

    代码示例

    BackTop 返回顶部 - 图1

    基础用法

    默认位置距离页面右部和底部 30px,滚动至距顶端 400px 时显示。

    1. <template>
    2. <BackTop></BackTop>
    3. </template>
    4. <script>
    5. export default {
    6. }
    7. </script>

    BackTop 返回顶部 - 图2

    自定义样式

    自定义了位置在页面底部 200px,滚动至距顶端 200px 时显示。

    1. <style scoped>
    2. .top{
    3. padding: 10px;
    4. background: rgba(0, 153, 229, .7);
    5. color: #fff;
    6. text-align: center;
    7. border-radius: 2px;
    8. }
    9. </style>
    10. <template>
    11. <BackTop :height="100" :bottom="200">
    12. <div class="top">返回顶端</div>
    13. </BackTop>
    14. </template>
    15. <script>
    16. export default {
    17. }
    18. </script>

    API

    BackTop props

    属性说明类型默认值
    height页面滚动高度达到该值时才显示BackTop组件Number400
    bottom组件距离底部的距离Number30
    right组件距离右部的距离Number30
    duration滚动动画持续时间,单位 毫秒Number1000

    BackTop events

    事件名说明返回值
    on-click点击按钮时触发