vue 框架下自定义滚动条（easyscroll）实现

2024年1月9日 193次阅读 来源: 悠讓

增加一个自定义滚动条插件：

//插件采用jsx语法，使用前需要安装vue-jsx插件
npm install babel-plugin-syntax-jsx --save-dev
npm install babel-plugin-transform-vue-jsx --save-dev
npm install babel-helper-vue-jsx-merge-props --save-dev
npm install babel-preset-es2015 --save-dev
//更改.babelrc文件
{
  "presets": [
    ["es2015", { "modules": false }],
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

//安装使用插件
npm isntall --save easyscroll
//main.js中
import EasyScroll from 'easyscroll';
Vue.use(EasyScroll);
//滚动条主要参数
myBarOption:{
  barColor:"#959595",   //滚动条颜色
  barWidth:6,           //滚动条宽度
  railColor:"#eee",     //导轨颜色
  barMarginRight:0,     //垂直滚动条距离整个容器右侧距离单位（px）
  barMaginBottom:0,     //水平滚动条距离底部距离单位（px)
  barOpacityMin:0.3,      //滚动条非激活状态下的透明度
  zIndex:"auto",        //滚动条z-Index
  autohidemode:true,     //自动隐藏模式
  horizrailenabled:true,//是否显示水平滚动条
}
//页面代码
<EasyScrollbar>
    <div  id="wrapper" style="height: 300px;">
      <div style="height: 500px;background-color: greenyellow;text-align: center;">
        最简单的应用
      </div>
    </div>
</EasyScrollbar>
<script>
   data{
     return{
       data(){
         myBarOption:{
           barColor:"red"
         }
       }
     }
   }
</script>
//后台搭建代码参考
<template>
  <div id="app">
    <router-view class="frameTop" name="top"/>
    <router-view class="frameMenu" name="menus"/>
    <EasyScrollbar class="frameMain" :barOption="myBarOption">
      <div class="organization" :style="'height:'+scrollHeight+'px'">
        <router-view></router-view>
      </div>
    </EasyScrollbar>
  </div>
</template>

<script>
export default {
  data(){
    return {
      scrollHeight: 0,         //EasyScrollbar 的直接子元素的高度
      myBarOption: {
        barColor:"#959595",   //滚动条颜色
        barWidth:6,           //滚动条宽度
        railColor:"#eee",     //导轨颜色
        barMarginRight:0,     //垂直滚动条距离整个容器右侧距离单位（px）
        barMaginBottom:0,     //水平滚动条距离底部距离单位（px)
        barOpacityMin:0.3,      //滚动条非激活状态下的透明度
        zIndex:"auto",          //滚动条z-Index
        autohidemode:true,     //自动隐藏模式
        horizrailenabled:true,//是否显示水平滚动条
      }
    }
  },
  created: function() {
    this.init();
  },
  methods:{
    init: function() {
      //初始化时计算页面核心模块得高度，并赋值给 EasyScrollbar 的直接子元素
      this.scrollHeight = document.documentElement.clientHeight-50;
    }
  }
}

</script>

<style>
@import "./assets/css/base.css";
@import "./assets/css/frame.css";
</style>
    原文作者：悠讓
    原文地址: https://segmentfault.com/a/1190000020221418
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞