vue 框架下自定义滚动条(easyscroll)实现方法

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

//插件采用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 :barOption=\"myBarOption\">
  <div>
   <div>
    内容
   </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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。