基於 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