如何解决即使在 Vue.JS 中的双击事件中,也可以在指定大小上滚动滑块
我正在创建一个简单的滑块,其中包含一些图像,如下所示。它正在(几乎)按照我想要的方式工作,但是当我双击下一个或上一个按钮时出现问题,它不会平滑滚动到下一个或前三个图像。如果我单击下一个按钮,它运行良好。它会滚动到接下来的 3 张图片。
我想更改代码,以便在单击或双击时滚动到下一张或上一张图片。
下面的设计只是一个示例,但它与我在实际项目中的设计完全一样。
var app = new Vue({
el: "#app",data() {
return {
lists: [],count: 0
}
},methods: {
CreateSlider () {
let counter = this.lists.length
let items = [
"https://i.pinimg.com/236x/a3/de/34/a3de34944dd0897c74b7fff1b180dd55.jpg","https://i.pinimg.com/236x/a3/de/34/a3de34944dd0897c74b7fff1b180dd55.jpg","https://i.pinimg.com/236x/a3/de/34/a3de34944dd0897c74b7fff1b180dd55.jpg"
]
if (this.lists.length < items.length) {
this.lists.splice(counter,items[counter])
}
},Next() {
let slider = document.querySelector('.slider')
slider.scrollLeft += (document.querySelector('.slider_image').offsetWidth * 3) + (13 * 3)
},PrevIoUs() {
let slider = document.querySelector('.slider')
slider.scrollLeft -= (document.querySelector('.slider_image').offsetWidth * 3) + (13 * 3)
}
},mounted() {
this.CreateSlider()
setInterval(this.CreateSlider,150)
}
})
.home {
position: relative;
display: flex;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.home button {
display: inline-block;
margin: 0 12px 0 0;
padding: 8px;
font-size: 17px;
letter-spacing: 1px;
font-family: 'Arial',sans-serif;
font-weight: 600;
cursor: pointer;
position: absolute;
left: 25px;
}
.home button:first-child {
top: 410px;
}
.home button:nth-child(2) {
top: 460px;
}
.home .slider {
background-color: green;
width: 100%;
height: auto;
white-space: Nowrap;
overflow: hidden;
scroll-behavior: smooth;
}
.home .slider ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
}
.home .slider ul li {
display: inline-block;
padding: 0 12px 0 0;
margin: 0;
}
.home .slider ul li img {
width: auto;
height: 400px;
}
.home .slider .list-enter-active,.home .slider .list-leave-active,.home .slider .list-move {
transition-duration: 100ms;
transition-property: opacity,transform;
transition-delay: 0ms;
transition-timing-function: ease-in-out;
}
.home .slider .list-enter {
opacity: 0;
transform: translateX(35px);
}
.home .slider .list-enter-to {
opacity: 1;
transform: translateX(0);
}
.home .slider .list-leave-active {
position: absolute;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.25);
}
100% {
transform: scale(1);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="home" id="app">
<button @click="Next">Next</button>
<button @click="PrevIoUs">PrevIoUs</button>
<div class="slider">
<transition-group tag="ul" class="monk" name="list">
<li v-for="(item,i) in lists" :key="i">
<img :src="item" class="slider_image" alt="">
</li>
</transition-group>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。