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