<template>
<div class='picture' ref="picRef">
<img src="@/assets/image/card1.jpg" @click="clickSmoth(1)" alt="">
<img src="@/assets/image/card2.jpg" @click="clickSmoth(2)" alt="">
<img src="@/assets/image/card3.jpg" @click="clickSmoth(3)" alt="">
<img src="@/assets/image/card4.jpg" @click="clickSmoth(4)" alt="">
<img src="@/assets/image/card5.jpg" @click="clickSmoth(5)" alt="">
<img src="@/assets/image/card6.jpg" @click="clickSmoth(6)" alt="">
<img src="@/assets/image/card7.jpg" @click="clickSmoth(7)" alt="">
<img src="@/assets/image/card8.jpg" @click="clickSmoth(8)" alt="">
<img src="@/assets/image/card9.jpg" @click="clickSmoth(9)" alt="">
<img src="@/assets/image/card10.jpg" @click="clickSmoth(10)" alt="">
</div>
</template>
<script setup>
import { ref } from 'vue'
let picRef = ref(null)
const clickSmoth = (index) => {
picRef.value.scrollLeft = (index - 1) * 120
}
</script>
<style scoped lang='scss'>
.picture {
width: 100%;
margin-bottom: 20px;
overflow: auto;
display: flex;
transition: all 0.5s;
scroll-behavior: smooth; // 平滑移动
img {
width: 170px;
height: 120px;
margin-right: 18px;
margin-bottom: 8px;
}
}
// 设置滚动条样式 可忽略
.picture::-webkit-scrollbar {
// width: 4px;
height: 8px;
}
// 设置滚动条样式 可忽略
.picture::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: $mainColor;
}
// 设置滚动条样式 可忽略
.picture::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #ccc;
}
</style>
js控制滚动条位置如何实现 平滑移动
最新推荐文章于 2024-07-20 13:48:02 发布