基于 Vue 2.x 实现的 back-top 组件

bga-back-top-vue

基于 Vue 2.x 实现的「滚动可滚动组件到顶部」的组件，支持多种自定义属性配置，以及经过 slot 插桩的方式深度定制 BgaBackTop 的内容。整个项目只须要在根组件中添加一次便可

npm

npm

vue2.x

效果图 Demo

bga-back-top

基本使用

1.安装依赖

npm install --save bga-back-top-vue复制代码

2.在入口 js 文件中导入。我这里是 main.js

import BgaBackTop from 'bga-back-top-vue'
Vue.use(BgaBackTop)复制代码

3.在根组件中使用，整个项目只须要在根组件中添加一次便可。我这里是 App.vue

<template>
  <div>
    <left-layout/>
    <router-view/>

    <!-- 在根组件中使用，整个项目只须要在这里添加一次便可 -->
    <bga-back-top :threshold="150" :right="160" :bottom="60" :width="40" :height="40" :svgMajorColor="'#7b79e5'" :svgMinorColor="'#ba6fda'" :svgType="'rocket'"/>
  </div>
</template>复制代码

4.为须要被滚动的标签添加「bga-back-top」样式

<template>
  <div class="demo1-container">
    <!-- 该标签里有很长很长的内容，为其添加滚动到顶部的功能，添加「bga-back-top」样式 -->
    <div class="have-very-long-content bga-back-top">
      <h2 v-for="n in 30">have very long content 很长很长的内容{{ n }} </h2>
    </div>
  </div>
</template>复制代码

属性说明

图片模式相关属性说明

属性名	说明	默认值
imgUrl	BgaBackTop 为图片模式时图片的 url，若是设置了该属性，则会忽略 svg 开头的相关属性	null
imgCss	BgaBackTop 为图片模式时图片的样式，若是设置了该属性，则会忽略 svg 开头的相关属性	null

SVG 模式相关属性说明

属性名	说明	默认值
svgMajorColor	BgaBackTop 为 SVG 模式时的主要颜色	#bfbfbf
svgMinorColor	BgaBackTop 为 SVG 模式时的次要颜色	#bfbfbf
svgType	SVG 模式的样式类型，包括 circle_border_arrow、circle_fill_arrow、rocket_smoke、rocket	rocket

公共属性说明

属性名	说明	默认值
right	BgaBackTop 右边缘离浏览器右边缘的距离，单位为 px，可是开发者只须要写数字就行	30
bottom	BgaBackTop 下边缘离浏览器下边缘的距离，单位为 px，可是开发者只须要写数字就行	60
width	BgaBackTop 宽度，单位为 px，可是开发者只须要写数字就行	48
height	BgaBackTop 高度，单位为 px，可是开发者只须要写数字就行	48
threshold	可滚动控件滚动偏移多少后才显示 BgaBackTop，必须大于 100	150
animationTime	可滚动控件滚动到顶部的动画时间，单位为毫秒，100 到 200 之间	150

高级用法

1.经过设置 imgCss 属性设置样式来支持鼠标 hover 状态时切换图片

<template>
  <div>
    <left-layout/>
    <router-view class="main-container"/>

    <!-- 在根组件中使用，整个项目只须要在这里添加一次便可 -->
    <bga-back-top :threshold="150" :right="560" :bottom="60" :width="40" :height="40" :imgCss="'bga-back-top-img'"/>
  </div>
</template>
<style lang="scss">
  // BgaBackTop 普通状态和鼠标悬停状态时的图片样式
  .bga-back-top-img {
    content: url("/assets/bga-back-top-normal.png");
    &:hover {
      content: url("/assets/bga-back-top-hover.png");
    }
  }
</style>复制代码

2.经过 slot 插桩的方式定制 BgaBackTop 的内容，若是为其添加了子组件则不会显示默认样式。下面演示插入自定义 SVG 和 img。固然开发者也能够插入其余子组件

a.插入自定义 SVG。能够到 阿里巴巴矢量图标库 中下载 SVG

<template>
  <div>
    <left-layout/>
    <router-view class="main-container"/>

    <!-- 在根组件中使用，整个项目只须要在这里添加一次便可 -->
    <bga-back-top :threshold="150" :right="80" :bottom="60" :width="40" :height="40">
      <svg width="40" height="40" viewBox="0 0 1024 1024">
        <!-- 火箭外形 -->
        <path fill="#7b79e5"
              d="M960 768l-128-73.12c0-64.432 0-128.752 0-182.88 0-192-128-384-320-512C320 128 192 320 192 512c0 54.128 0 118.432 0 182.88L64 768c-38.816 20.32-64 47.632-64 83.008L0 960c0 35.376 28.624 64 64 64l896 0c35.376 0 64-28.624 64-64l0-108.992C1024 815.632 994 790 960 768zM896 896 128 896l0-17.12 192-109.68L320 512c0-119.936 71.872-249.376 192-351.872C632.128 262.624 704 392.064 704 512l0 257.184 189.184 108.064c0.992 0.624 1.936 1.248 2.816 1.872L896 896z"
              p-id="5019"/>
        <!-- 中间圆点 -->
        <path fill="#ba6fda" d="M512 448m-64 0a4 4 0 1 0 128 0 4 4 0 1 0-128 0Z" p-id="5020"/>
      </svg>
    </bga-back-top>
  </div>
</template>复制代码

b.插入自定义图片

<template>
  <div>
    <left-layout/>
    <router-view class="main-container"/>

    <!-- 在根组件中使用，整个项目只须要在这里添加一次便可 -->
    <bga-back-top :threshold="150" :right="480" :bottom="60" :width="40" :height="40">
      <img class="bga-back-top-img" style="width: 100%; height: 100%;"/>
    </bga-back-top>
  </div>
</template>
<style lang="scss">
  // BgaBackTop 普通状态和鼠标悬停状态时的图片样式
  .bga-back-top-img {
    content: url("/assets/bga-back-top-normal.png");
    &:hover {
      content: url("/assets/bga-back-top-hover.png");
    }
  }
</style>复制代码

3.能够在任意的 Vue 组件中经过 JavaScript 代码主动触发可滚动组件滚动到顶部。应用场景：滚动必定距离后从新加载了网络数据，加载完数据后将可滚动组件滚动到顶部

// 在 BgaBackTop 内部已经为 Vue.prototype 添加了全局方法 $bgaBackTop，所以在 Vue 实例中能够直接经过 this.$bgaBackTop() 来调用该方法
this.$bgaBackTop()复制代码

关于我

新浪微博	我的主页	邮箱	BGA系列开源库QQ群
bingoogolapple	bingoogolapple.cn	bingoogolapple@gmail.com	BGA_CODE_CLUB

相关连接

• GitHub 源码
• 我的站点 Demo