vue 框架下自定义滚动条(easyscroll)实现方法
2019-08-29 10:33
537 查看
增加一个自定义滚动条插件:
//插件采用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>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- Vue的elementUI实现自定义主题方法
- 实现一个简单的类 Vue 框架(二) —— 数据的绑定之修改可监听的数据绑定方法
- vue移动端监听滚动条高度的实现方法
- 实现一个简单的类 Vue 框架(一) —— 数据的绑定之简单粗暴方法
- Django框架之登录后自定义跳转页面的实现方法
- kphp框架中实现自定义session会话处理方法的php和msyql代码分享
- vue实现自定义H5视频播放器的方法步骤
- Vue中自定义全局组件的实现方法
- 利用vue组件自定义v-model实现一个Tab组件方法示例
- vue.js-div滚动条隐藏但有滚动效果的实现方法
- thinkPHP5框架自定义验证器实现方法分析
- 基于vue框架手写一个notify插件实现通知功能的方法
- vue使用keep-alive保持滚动条位置的实现方法
- thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
- CI框架实现创建自定义类库的方法
- Yii框架实现记录日志到自定义文件的方法
- Vue实现用户自定义字段显示数据的方法
- 整理: 实现自定义消息的2种方法
- 实现框架页面iframe的背景透明方法
- Android中ImageButton自定义按钮的按下效果的代码实现方法,附网上2种经典解决方法