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


Posted in Javascript onAugust 29, 2019

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

//插件采用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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jqgrid 简单学习笔记
May 03 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
简单的三步vuex入门
May 20 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 Javascript
Angular8路由守卫原理和使用方法
Aug 29 #Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 #Javascript
vue父子组件通信的高级用法示例
Aug 29 #Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 #Javascript
JS中async/await实现异步调用的方法
Aug 28 #Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 #Javascript
详解用async/await来处理异步
Aug 28 #Javascript
You might like
实现“上一页”和“下一页按钮
2006/10/09 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
JavaScript 全角转半角部分
2009/10/28 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
JS读取XML文件示例代码
2013/11/15 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
node网页分段渲染详解
2016/09/05 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
深入理解Puppeteer的入门教程和实践
2019/03/05 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
深入理解python中的select模块
2017/04/23 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
寒假实习自荐信
2014/01/26 职场文书
十佳大学生事迹材料
2014/01/29 职场文书
小学见习报告
2014/10/31 职场文书
个人借款协议书范本
2014/11/17 职场文书
付款证明模板
2015/06/19 职场文书
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL