好资源导航 » 文章资讯 » vue 框架下自定义滚动条(easyscroll)实现方法

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

2023-08-15 16:12:04 66

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

//插件采用jsx语法，使用前需要安装vue-jsx插件
npminstallbabel-plugin-syntax-jsx--save-dev
npminstallbabel-plugin-transform-vue-jsx--save-dev
npminstallbabel-helper-vue-jsx-merge-props--save-dev
npminstallbabel-preset-es2015--save-dev

//更改.babelrc文件
{
"presets":[
["es2015",{"modules":false}],
["env",{
"modules":false,
"targets":{
"browsers":[">1%","last2versions","notie<=8"]
}
}],
"stage-2"
],
"plugins":["transform-vue-jsx","transform-runtime"],
"env":{
"test":{
"presets":["env","stage-2"],
"plugins":["istanbul"]
}
}
}

//安装使用插件
npmisntall--saveeasyscroll

//main.js中
importEasyScrollfrom'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,//是否显示水平滚动条
}

//页面代码



内容

//后台搭建代码参考

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐