滚动条插件vue-scroll

一、介绍

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";
import "vuescroll/dist/vuescroll.css";
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;
            }
          }
        }

效果如下：