在Vue项目中使用easyScroll滚动条插件

最新推荐文章于 2024-09-06 23:40:25 发布

小黑ii

最新推荐文章于 2024-09-06 23:40:25 发布

阅读量1.3w

点赞数 2

分类专栏： vue 插件 vue学习总结文章标签：插件 vue easyScroll

本文链接：https://blog.csdn.net/qq_35844177/article/details/78042284

版权

vue 同时被 3 个专栏收录

32 篇文章 1 订阅

订阅专栏

vue学习总结

25 篇文章 5 订阅

订阅专栏

插件

2 篇文章 0 订阅

订阅专栏

插件github地址：https://github.com/GarveyZuo/EasyScroll/

1.插件采用jsx语法，使用前需要安装vue-jsx插件：

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-es2015\
  --save-dev

2.更改.babelrc文件

{
  "presets": [
    ["es2015", { "modules": false }],
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "plugins": ["transform-vue-jsx"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

3.安装使用插件

npm isntall --save easyscroll

main.js中：

import EasyScroll from 'easyscroll';
Vue.use(EasyScroll);

4.简单应用

<EasyScrollbar>
        <div  id="wrapper" style="height: 300px;">
          <div style="height: 500px;background-color: greenyellow;text-align: center;">
            最简单的应用
          </div>
        </div>
</EasyScrollbar>

5.滚动条主要参数

opt:{
  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>