图片组件滚动条隐藏适配

This commit is contained in:
luJianJun 2023-08-10 18:18:05 +08:00
parent 33934f8fb5
commit 8f2c376ba8

View File

@ -1115,23 +1115,29 @@ let imgListTab = ref(0)
let interval = ''
let clientWidth = ref(null)
let scrollWidth = ref(null)
let scrollMove=false
//
let moveImageList = (type) => {
if (type === 'right' && imgScrollBottom()) return
if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIstLeft.value.length - 1 && type === 'right')) return
type === 'left' ? imgListTab.value-- : imgListTab.value++
console.log(imageLIstLeft.value[imgListTab.value])
setOffsetWidth(imageLIstLeft.value[imgListTab.value], type)
}
//
let setOffsetWidth = (num, type) => {
let scroll = 0
if(scrollMove)return
scrollMove=true
interval = setInterval(() => {
if (!imageList.value) {
scrollMove=false
clearInterval(interval)
return
}
scroll = type === 'left' ? imageList.value.scrollLeft -= 10 : imageList.value.scrollLeft += 10
if ((type === 'left' ? num >= scroll : num <= scroll) || scroll + clientWidth.value >= scrollWidth.value) {
if ((type === 'left' ? num >= scroll : num <= scroll)) {
scrollMove=false
clearInterval(interval)
}
})
@ -1147,11 +1153,12 @@ let imgScrollBottom = () => {
let imgData = ref(null)
//
let setImageWidth = (num) => {
imageLIstLeft.value[num] = imgData.value[num] && imgData.value[num].offsetLeft - 20
imageLIstLeft.value[num] = imgData.value[num] && imgData.value[num].offsetLeft
if (imageLIstLeft.value.length === imgList.value.length) {
clientWidth.value = imageList.value.clientWidth
scrollWidth.value = imageList.value.scrollWidth
}
console.log(imageLIstLeft.value)
}
//
@ -2460,6 +2467,8 @@ img {
.list-box {
overflow-x: scroll;
overflow: -moz-scrollbars-none; // Firefox
-ms-overflow-style: none;//
height: 120px;
color: #fff;