实现效果
大长图可以横向滑动滚动,并且滑动到最右边切换指示器
代码实现
实现逻辑:
1.将原有滑动条隐藏,
2.计算滑动盒子的宽度与屏幕宽度的差值,如果与滑动的距离无限接近,那就说明已经滑动到了最右边。
第一个指示器是控制css样式,第二个指示器是滑动效果
<template>
<div>
<div class="container">
<div class="container-item">
<img src="../../assets/tree.jpg" alt="">
</div>
</div>
<div class="indicator">
<span :class="{bgcolor:leftColor}" ></span>
<span :class="{bgcolor:rightColor}"></span>
</div>
<!--指示器滑动的效果-->
<div class="indicator">
<div class="line"></div>
</div>
</div>
</template>
<script>
export default {
name: 'my-page',
data () {
return {
leftColor: true,
rightColor: false
}
},
mounted () {
const container = document.getElementsByClassName('container')[0]
const myWidth = container.scrollWidth - container.clientWidth
const indicator = document.querySelector('.indicator')
const line = document.querySelector('.line')
// console.log(myWidth, '盒子宽度减去屏幕宽度')
container.addEventListener('scroll', () => {
const newWidth = myWidth - container.scrollLeft
// console.log(container.scrollLeft, newWidth, '超出的宽度减去滚动的距离')
if (newWidth < 1) {
// 滚动到了最右边
this.rightColor = true
this.leftColor = false
// 滑动效果
line.style.transform = `translateX(${indicator.scrollWidth - line.scrollWidth}px)`
}
if (container.scrollLeft === 0) {
// 滚动到了最左边
this.leftColor = true
this.rightColor = false
// 滑动效果
line.style.transform = 'translateX(0px)'
}
})
}
}
</script>
<style>
.container {
width: 100%;
height: 348px;
overflow: scroll;
}
.container::-webkit-scrollbar {
display: none;
}
.container-item{
width: 929px;
height: 100%;
}
.container-item img{
width: 929px;
height: 100%;
}
.indicator{
width:80px;
height:10px;
border-radius: 5px;
background-color: #ccc;
margin: 20px auto;
display: flex;
}
span{
width:40px;
height:10px;
border-radius: 5px;
}
.bgcolor{
background-color: pink;
}
.line{
width:50px;
height:10px;
border-radius: 5px;
background-color: pink;
transition:all .3s
}
</style>