介绍道具:,{
,//是否显示原生滚动条
,本地:布尔,
,//是否自动隐藏滚动条
,自动隐藏:布尔,
,//滚动条尺寸
,大小:{,类型:(数量,,字符串),默认值:,& # 39;& # 39;,},
,//滚动条颜色
,颜色:字符串,
,//滚动条层级
,zIndex: null
}, & lt; !——,设置原生滚动条,——比;
& lt; v-scroll native>
,& lt; https://www.yisu.com/zixun/img src=" https://cn.vuejs.org/images/logo.png "/>
& lt; !,,//VScroll 自定义滚动条模板,——比;
& lt; template>
,& lt; div 类=皏ui__scrollbar", ref=皉ef__box", @mouseenter=癶andleMouseEnter", @mouseleave=癶andleMouseLeave", v-resize=癶andleResize"比;
,& lt; div :类=癧& # 39;vscroll__wrap& # 39;,,{本地:本机}]“,ref=皉ef__wrap", @scroll=癶andleScroll"比;
,& lt; div 类=皏scroll__view", v-resize=癶andleResize"比;
,& lt; slot /比;
,& lt;/div>
,& lt;/div>
,& lt; !——,//滚动条,——比;
,& lt; div :类=癧& # 39;vscroll__bar 垂直# 39;,,{ishide: ! isShow}]“, @mousedown=癶andleClickTrack(美元)事件,,0)“,:在
,& lt; div 类=皏scroll__thumb", ref=皉ef__barY",:, @mousedown=癶andleDragThumb(美元)事件,,0)“祝辞& lt;/div>
,& lt;/div>
,& lt; div :类=癧& # 39;vscroll__bar 水平# 39;,,{ishide: ! isShow}]“, @mousedown=癶andleClickTrack($事件,1)“,:在
,& lt; div 类=皏scroll__thumb", ref=皉ef__barX",:, @mousedown=癶andleDragThumb($事件,1)“祝辞& lt;/div>
,& lt;/div>
,& lt;/div>
& lt;/template> //,监听元素/DOM尺寸变化
指示:{
,& # 39;调整# 39;:,{
,绑定:函数(el,绑定),{
,let width =, & # 39; & # 39;, height =, & # 39; & # 39;;
,function get (), {
,const elStyle =, el.currentStyle ?, el.currentStyle :, document.defaultView.getComputedStyle (el, null);
,if (width !==, elStyle.width | |, height !==, elStyle.height), {
,binding.value({宽度,高度});
,}=,,width elStyle.width;=,,height elStyle.height;
,}=,,el.__vueReize__ setInterval (,, 16);
},
,解放:函数(el), {
,clearInterval (el.__vueReize__);
,}
,}
},
本篇文章为大家展示了怎么在Vue。js中利用VScroll实现一个滚动条功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
<强>参数配置
<强>◆引入组件
在主要。js中引入滚动条组件VScroll。
从& # 39;进口VScroll。/组件/vscroll& # 39;
Vue.use (VScroll)
<强>◆快速使用
* *在使用前需要设置v-scroll外层div容器的宽度或高度。
这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!
这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!这里是内容信息!
<强>◆实现过程
vscroll组件目录结构如下:
在vue中如何通过指令directtive函数来监听元素/DOM尺寸变化?
非常简单,写一个轮询自定义指令就行。这里就直接监听滚动区DOM宽/高变化来动态更新滚动条状态。
/* *
,* @Desc vue.js自定义滚动条直接VScroll
,* @Time andy by 2020-11-30
,* @About 问:282310962,天气:xy190310
,*/& lt; script>
,import domUtils 得到& # 39;效用。//dom # 39;
,export default {
,道具:{
,//是否显示原生滚动条
,本地:布尔,
,//是否自动隐藏滚动条
,自动隐藏:布尔,
,//滚动条尺寸
,大小:{,类型:(数量,,字符串),默认值:,& # 39;& # 39;,},
,//滚动条颜色
,颜色:字符串,
,//滚动条层级
,zIndex: null
},
,数据(){
,return {
,barWidth: 0,,//,滚动条宽度
,barHeight: 0,,//,滚动条高度
,ratioX: 1,,//,滚动条水平偏移率
,ratioY: 1,,//,滚动条垂直偏移率
,isTaped:假的,,//,鼠标光标是否按住滚动条
,isHover:假的,,//,鼠标光标是否悬停在滚动区
,isShow: ! this.autohide,,//,是否显示滚动条
,}
},
,安装(){
这。ref__box 美元;=,refs.ref__box美元
这。ref__wrap 美元;=,refs.ref__wrap美元
这。ref__barY 美元;=,refs.ref__barY美元
这。ref__barX 美元;=,refs.ref__barX美元
这。美元nextTick (this.updated)
},
,//?
,方法:{
,//鼠标移入
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null怎么在Vue.js中利用VScroll实现一个滚动条功能
