图片组件滚动条隐藏适配
This commit is contained in:
@@ -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;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user