图片组件滚动条隐藏适配

This commit is contained in:
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 interval = ''
let clientWidth = ref(null) let clientWidth = ref(null)
let scrollWidth = ref(null) let scrollWidth = ref(null)
let scrollMove=false
//点击方向按钮 //点击方向按钮
let moveImageList = (type) => { let moveImageList = (type) => {
if (type === 'right' && imgScrollBottom()) return if (type === 'right' && imgScrollBottom()) return
if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIstLeft.value.length - 1 && type === 'right')) return if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imageLIstLeft.value.length - 1 && type === 'right')) return
type === 'left' ? imgListTab.value-- : imgListTab.value++ type === 'left' ? imgListTab.value-- : imgListTab.value++
console.log(imageLIstLeft.value[imgListTab.value])
setOffsetWidth(imageLIstLeft.value[imgListTab.value], type) setOffsetWidth(imageLIstLeft.value[imgListTab.value], type)
} }
//设置滚动 //设置滚动
let setOffsetWidth = (num, type) => { let setOffsetWidth = (num, type) => {
let scroll = 0 let scroll = 0
if(scrollMove)return
scrollMove=true
interval = setInterval(() => { interval = setInterval(() => {
if (!imageList.value) { if (!imageList.value) {
scrollMove=false
clearInterval(interval) clearInterval(interval)
return return
} }
scroll = type === 'left' ? imageList.value.scrollLeft -= 10 : imageList.value.scrollLeft += 10 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) clearInterval(interval)
} }
}) })
@@ -1147,11 +1153,12 @@ let imgScrollBottom = () => {
let imgData = ref(null) let imgData = ref(null)
//获取图片宽度 //获取图片宽度
let setImageWidth = (num) => { 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) { if (imageLIstLeft.value.length === imgList.value.length) {
clientWidth.value = imageList.value.clientWidth clientWidth.value = imageList.value.clientWidth
scrollWidth.value = imageList.value.scrollWidth scrollWidth.value = imageList.value.scrollWidth
} }
console.log(imageLIstLeft.value)
} }
//学校地址数据 //学校地址数据
@@ -2460,6 +2467,8 @@ img {
.list-box { .list-box {
overflow-x: scroll; overflow-x: scroll;
overflow: -moz-scrollbars-none; // Firefox
-ms-overflow-style: none;// 微软
height: 120px; height: 120px;
color: #fff; color: #fff;