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 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
让元素在网页中可拖动示例代码
Aug 13 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
requirejs + vue 项目搭建详解
Jun 16 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
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
php单链表实现代码分享
2016/07/04 PHP
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
pytorch 共享参数的示例
2019/08/17 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
python实现与redis交互操作详解
2020/04/21 Python
Python urllib3软件包的使用说明
2020/11/18 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
岗位职责的构建方法
2014/02/01 职场文书
优秀团支部事迹材料
2014/02/08 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
小学推普周活动总结
2015/05/07 职场文书
CAD实训总结范文
2015/08/03 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
python 逐步回归算法
2021/04/06 Python
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android