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

最近自己在自學vue2.0，然后就自己摸索做一個簡單的后台管理系統，在做的過程中，總感覺不同瀏覽器自帶的滾動條樣式不統一，也很難看，所以就在網上找一些使用vue的滾動條插件。最開始用的是Easy-scroll插件，可是在使用過程中，發現一個問題——由於在開發過程中，需要經常打開開發者選項進行調試，可是只要一開啟這個選項，Easy-scroll插件就會出現debugger斷點，在網上也一直沒找到怎么取消debugger。后來就找到了今天要說的這款插件：vue-happy-scroll。

 

先張貼一張效果圖：

說明：這里會出現橫向滾動條，是因為默認是開啟橫向滾動條的，並且內容區域高度超出了外層盒子的寬度

 

下面介紹使用方法：

1、安裝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>

 

2、注冊組件

在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'

 

3、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、常用屬性說明

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

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

4.1、滾動條顏色：color屬性

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

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

 

4.2、滾動條粗細：size屬性

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

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

 

4.3、是否開啟監聽容器大小變化：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