html任务3 模拟滚动条,vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件...
/**
* @Desc Vue3.0虛擬滾動條組件V3Scroll
* @Time andy by 2021-01
* @About Q：282310962 wx：xy190310*/
props: {//...
},/**
* Vue3.x自定義指令寫法*/
//監聽DOM尺寸變化
directives: {'resize': {
beforeMount:function(el, binding) {
let width= '', height = '';functionget() {
const elStyle= el.currentStyle ? el.currentStyle : document.defaultView.getComputedStyle(el, null);if (width !== elStyle.width || height !==elStyle.height) {
binding.value({width, height});
}
width=elStyle.width;
height=elStyle.height;
}
el.__vueReize__= setInterval(get, 16);
},
unmounted:function(el) {
clearInterval(el.__vueReize__);
}
}
},
setup(props, context) {
const ref__box= ref(null)
const ref__wrap= ref(null)
const ref__barX= ref(null)
const ref__barY= ref(null)
const data=reactive({
barWidth:0, //滾動條寬度
barHeight: 0, //滾動條高度
ratioX: 1, //滾動條水平偏移率
ratioY: 1, //滾動條垂直偏移率
isTaped: false, //鼠標光標是否按住滾動條
isHover: false, //鼠標光標是否懸停在滾動區
isShow: !props.autohide, //是否顯示滾動條
})
onMounted(()=>{
nextTick(()=>{
updated()
})
})//鼠標滑入
const handleMouseEnter = () =>{
data.isHover= truedata.isShow= trueupdated()
}//鼠標滑出
const handleMouseLeave = () =>{
data.isHover= falsedata.isShow= false}//拖動滾動條
const handleDragThumb = (e, index) =>{
const elWrap=ref__wrap.value
const elBarX=ref__barX.value
const elBarY=ref__barY.value
data.isTaped= truelet c={}//阻止默認事件
domUtils.isIE() ? (e.returnValue = false, e.cancelBubble = true) : (e.stopPropagation(), e.preventDefault())
document.onselectstart= () => false
if(index == 0) {
c.dragY= truec.clientY=e.clientY
}else{
c.dragX= truec.clientX=e.clientX
}//...
}//點擊滾動槽
const handleClickTrack = (e, index) =>{//...
}//更新滾動區
const updated = () =>{if(props.native) returnconst elBox=ref__box.value
const elWrap=ref__wrap.value
const elBarX=ref__barX.value
const elBarY=ref__barY.value
let barSize=domUtils.getScrollBarSize()//垂直滾動條
if(elWrap.scrollHeight >elWrap.offsetHeight) {
data.barHeight= elBox.offsetHeight **2 /elWrap.scrollHeight
data.ratioY= (elWrap.scrollHeight - elBox.offsetHeight) / (elBox.offsetHeight -data.barHeight)
elBarY.style.transform= `translateY(${elWrap.scrollTop /data.ratioY}px)`//隱藏系統滾動條
if(barSize) {
elWrap.style.marginRight= -barSize + 'px'}
}else{
data.barHeight= 0elBarY.style.transform= ''elWrap.style.marginRight= ''}//水平滾動條
//...
}//滾動區元素/DOM尺寸改變
const handleResize = () =>{//執行更新操做
}//...
return{
...toRefs(data),
ref__box, ref__wrap, ref__barX, ref__barY,
handleMouseEnter, handleMouseLeave,
handleDragThumb, handleClickTrack,
updated,//...
}
}
}
總結
以上是生活随笔為你收集整理的html任务3 模拟滚动条,vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 相机快速入门：单反微单各按键的功能，屏幕
- 下一篇： html5倒计时秒杀怎么做,vue 设