VUE滾動條插件——vue-happy-scroll

最近本身在自學vue2.0，而後就本身摸索作一個簡單的後臺管理系統，在作的過程當中，總感受不一樣瀏覽器自帶的滾動條樣式不統一，也很難看，因此就在網上找一些使用vue的滾動條插件。最開始用的是Easy-scroll插件，但是在使用過程當中，發現一個問題——因爲在開發過程當中，須要常常打開開發者選項進行調試，但是隻要一開啓這個選項，Easy-scroll插件就會出現debugger斷點，在網上也一直沒找到怎麼取消debugger。後來就找到了今天要說的這款插件：vue-happy-scroll。

 

先張貼一張效果圖：

說明：這裏會出現橫向滾動條，是由於默認是開啓橫向滾動條的，而且內容區域高度超出了外層盒子的寬度

 

下面介紹使用方法：

一、安裝vue-happy-scroll

推薦使用npm安裝，這樣能夠跟隨你的webpack配置去選擇怎樣打包

npm install vue-happy-scroll --save-dev

固然，你也能夠選擇使用script標籤的方式引入

<!-- 引入css，該連接始終爲最新版的資源 -->
<link rel="stylesheet" href="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.css">
<!-- 引入vue -->
<!-- 引入組件，該連接始終爲最新版的資源 -->
<script src="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.min.js"></script>

 

二、註冊組件

在main.js文件中編寫一下代碼段：

import Vue from 'vue'
import { HappyScroll } from 'vue-happy-scroll'
//自定義組件名
Vue.component('happy-scroll', HappyScroll)
// 引入css
import 'vue-happy-scroll/docs/happy-scroll.css'

 

三、vue組件中使用

 在這裏就以個人小項目爲例，在dashboard.vue文件中寫入以下代碼，使用happy-scrool標籤就可使用滾動條了

<template>
  <div>
    <h3>儀表盤</h3>
　　 <!-- 外層盒子 -->
    <div style="height:200px;width:300px;background-color:#ccc;">
      <!-- 這裏的標籤名稱要和main.js文件中定義的組件名稱保持一致 -->
      <happy-scroll color="rgba(0,0,0,0.5)" size="5">
        <!-- 內層盒子——內容區 -->
        <div class="con">
          <p>士大夫撒入個任務二我的合同不大廢物我的都怕順風耳個二級gap所愛速發sure歐若爾奧沙是否</p>
          <p>士大夫撒入個任務二我的合同不大廢物我的都怕順風耳個二級gap所愛速發sure歐若爾奧沙是否</p>
          <p>士大夫撒入個任務二我的合同不大廢物我的都怕順風耳個二級gap所愛速發sure歐若爾奧沙是否</p>
          <p>士大夫撒入個任務二我的合同不大廢物我的都怕順風耳個二級gap所愛速發sure歐若爾奧沙是否</p>
          <p>士大夫撒入個任務二我的合同不大廢物我的都怕順風耳個二級gap所愛速發sure歐若爾奧沙是否</p>
          <p>士大夫撒入個任務二我的合同不大廢物我的都怕順風耳個二級gap所愛速發sure歐若爾奧沙是否</p>
          <p>士大夫撒入個任務二我的合同不大廢物我的都怕順風耳個二級gap所愛速發sure歐若爾奧沙是否</p>
          <p>士大夫撒入個任務二我的合同不大廢物我的都怕順風耳個二級gap所愛速發sure歐若爾奧沙是否</p>
          <p>士大夫撒入個任務二我的合同不大廢物我的都怕順風耳個二級gap所愛速發sure歐若爾奧沙是否</p>
          <p>士大夫撒入個任務二我的合同不大廢物我的都怕順風耳個二級gap所愛速發sure歐若爾奧沙是否</p>
        </div>
      </happy-scroll>
    </div>
  </div>
</template>

 

因爲在這裏，沒有針對class爲con的div標籤單獨設置寬度，因此默認寬度就是和外層盒子寬度同樣，因此就不會出現橫向滾動條了（固然若是當內部盒子寬度超出外層盒子，就會出現橫向滾動條了），效果圖以下：

 

四、經常使用屬性說明

該插件能夠配置經常使用的滾動條顏色、粗細、豎向滾動條是左仍是右邊顯示、橫向滾動條是上仍是下邊顯示、滾動條是否開啓監聽容器大小變化等屬性。

在這裏我只寫兩個我可能最經常使用的屬性:顏色、大小。

4.一、滾動條顏色：color屬性

設置滾動條顏色的屬性爲color，直接在標籤上添加便可，在上面代碼中，我已經添加了color屬性的值爲半透明的黑色滾動條（rgba(0,0,0,0.5)），也可使用顏色單詞，

例如<happy-scroll color="red">

 

4.二、滾動條粗細：size屬性

設置滾動條粗細尺寸的屬性爲size，直接在標籤上添加便可，其中默認值是4，例如當我設置size="10"的時候，

<happy-scroll color="red" size="10">

 

4.三、是否開啓監聽容器大小變化：resize屬性

開啓監聽容器大小變化的屬性名爲resize，直接在標籤上添加便可，<happy-scroll color="red" size="10" resize> ，這樣，當你由於點擊頁面操做時，若是內容區的寬高變化了，滾動條的長短也會相應的變化（happy-scroll標籤內的第一層標籤開始就是內容區，這裏是class爲con的div）

例如：假設點擊頁碼某一個地方後，div.con的高度變成了2000px：

 

<happy-scroll color="red" size="5" resize>
    <div class="con" style="height:2000px;">

則滾動條效果爲如圖：

 

 還有其餘更多屬性，這裏就再也不一一介紹說明，須要瞭解更詳細的內容，能夠參考該插件的開發者的github地址：https://github.com/happy-js/vue-happy-scroll

 

須要購買阿里雲產品的，能夠點擊此連接領取紅包，優惠購買哦： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07