话不多说先上图
左右滚动，下面的随着滚动
html代码
<div class="course-container">
<div class="swiper-con" @touchstart="starPos" @touchend="endPos">
<div
v-for="(swp,swip) of swiperList"
:key="swip"
class="swip-item"
@click="jumpList(swp.name)"
>
<img :src="swp.src" class="swip-pic" />
<span class="swp-name">{{swp.name}}</span>
</div>
</div>
<div class="swiper-dots">
<div class="nav-dots-box">
<span class="active-box" ref="dot" style="26.8924px;"></span>
</div>
</div>
</div>
css代码
.swiper-dots {
margin-top: 20px;
}
.nav-dots-box {
margin: 0 auto;
position: relative;
10.667vw;
height: 0.8vw;
border-radius: 0.533vw;
background: #dcdcdc;
}
.active-box {
border-radius: 0.533vw;
display: inline-block;
position: absolute;
5.867vw;
height: 0.8vw;
background: #01b8fc;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.swiper-con {
white-space: nowrap;
overflow: auto;
margin-top: 20px;
}
.swp-name {
margin-top: 1.067vw;
display: block;
font-size: 3.467vw;
color: #666;
height: 4.8vw;
line-height: 4.8vw;
}
.swiper-con::-webkit-scrollbar {
display: none;
}
.swip-item {
display: inline-block;
text-align: center;
25%;
}
/* .swip-item:nth-child(3) {
margin-left: 0vw;
} */
.swip-pic {
margin: 0 auto;
display: block;
10.933vw;
height: 10.933vw;
}
js 代码
export default {
data(){
return {
l astPosition: 0,
nextPosition: 0
},
methods:{
starPos (e) {
this.lastPosition = e.changedTouches[0].clientX
},
endPos (e) {
this.nextPosition = e.changedTouches[0].clientX
// 如果开始的大于结束的代表的是往左滑动,否则是往右滑动
if (this.lastPosition > this.nextPosition) {
this.$refs.dot.style.transform = 'translateX(13.1171px)'
} else if (this.lastPosition < this.nextPosition) {
this.$refs.dot.style.transform = 'translateX(0px)'
}
}
}
}}