捲軸外掛vue-scroll

周文豪發表於2024-05-28
Vue

一、介紹

vuescroll 是一個基於 vue.js 2.X虛擬捲軸， 它支援定製捲軸的樣式，檢測內容尺寸變化、能夠使內容分頁、支援上拉-重新整理，下推載入等諸多特性

二、特點

(1)擁有原生捲軸的滾動行為
(2)可以定製捲軸的樣式(包括顏色、尺寸、位置、透明度、是否保持顯示等)
(3)在模式之間自由切換
(4)能夠透過設定滾動動畫來平滑地滾動
(5)拉取重新整理和推動載入
(6)支援分頁模式(每次滑動整個頁面)
(7)支援快照模式(每次滑動滾動一個使用者定義的距離)
(8)可以檢測內容尺寸發生變化

三、用法


1、安裝

npm install vuescroll -S

2、main.js配置

import VueScroll from 'vuescroll';
Vue.use(VueScroll);

3、使用

<template>
  <div style="width: 20%;height: 500px;background-color: lightgray">
    <vue-scroll :ops="ops">
      <div class="content" v-for= "item in 100" :key="item">
        <span>{{item}}</span>
      </div>
    </vue-scroll>
  </div>
</template>

4、資料模型

data(){
    return {
      // 捲軸的配置資訊
      ops: {
        vuescroll: {},
        scrollPanel: {
          scrollingX: false,//關閉橫向滾動
        },
        rail: {
          keepShow: true,
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滾動的時候才顯示捲軸
          background: "#efefef", //捲軸顏色
          opacity: 0.8, //捲軸透明度
        },
      },
    }
  }

5、效果

四、修改捲軸樣式

::v-deep .__vuescroll{
        //縱向捲軸
        .__rail-is-vertical {
          .__bar-wrap-is-vertical{
            .__bar-is-vertical{
              height: 20% !important;
              background: #647DFA !important;
              width: 10px !important;
              position: absolute;
              right: 6px !important;
              border-radius: 5px !important;
              margin-right: 0px !important;

            }
          }
        }
        // 橫向捲軸
        .__rail-is-horizontal {
          .__bar-wrap-is-horizontal{
            .__bar-is-horizontal{
              background: #647DFA !important;
              height: 10px !important;
            }
          }
        }

效果如下：

相關文章