javascript - vue 自定义滑块,下一个和上一个按钮
问题描述
我有一个自定义滑块,如果数组中实际上有任何匹配和索引的幻灯片,我只想显示下一个和上一个按钮...
因此,如果我在最后一张幻灯片上,它应该只显示“上一个”按钮,如果是第一张幻灯片,则只显示“下一个按钮”......
我目前有点坚持如何做到这一点..我看过array.findIndex(),但没有运气..
的HTML:
<transition-group name='fade' tag='div' mode="in-out">
<div class="slide" v-for="(case_item, index) in cases" :key="case_item.id" v-show="current_slide_number === index" :class="{'is-active-slide': current_slide_number === index}">
<div class="case-slider__info">
<h2>{{case_item.role}} {{index}}</h2>
<h3>{{case_item.title}}</h3>
<app-button title="Se projekt" button-type="primary" :show-icon="false" display="block"></app-button>
</div>
<div class="case-slider__image">
<img src="http://via.placeholder.com/600x350" />
</div>
</div>
</transition-group>
<div class="case-slider__navigation">
<div class="next" @click="nextSlide">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 47.255 47.255" style="enable-background:new 0 0 47.255 47.255;" xml:space="preserve" width="512px" height="512px">
<g>
<path d="M12.314,47.255c-0.256,0-0.512-0.098-0.707-0.293c-0.391-0.391-0.391-1.023,0-1.414l21.92-21.92l-21.92-21.92 c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0L35.648,22.92c0.391,0.391,0.391,1.023,0,1.414L13.021,46.962 C12.825,47.157,12.57,47.255,12.314,47.255z" fill="#FFFFFF"/>
</g>
</svg>
</div>
<div class="prev" @click="prevSlide">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 47.255 47.255" style="enable-background:new 0 0 47.255 47.255;" xml:space="preserve" width="512px" height="512px">
<g>
<path d="M34.941,47.255c-0.256,0-0.512-0.098-0.707-0.293L11.607,24.334c-0.391-0.391-0.391-1.023,0-1.414L34.234,0.293 c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414l-21.92,21.92l21.92,21.92c0.391,0.391,0.391,1.023,0,1.414 C35.453,47.157,35.197,47.255,34.941,47.255z" fill="#FFFFFF"/>
</g>
</svg>
</div>
</div>
数组即时循环:
cases: [
{
id: 1,
title: "test1",
link: "http://tv2.dk",
role: 'A role of some sort'
},
{
id: 2,
title: "test2",
link: "http://tv2",
role: 'A role of some sort'
},
{
id: 3,
title: "test3",
link: "http://tv2",
role: 'A role of some sort'
},
{
id: 4,
title: "test4",
link: "http://tv2",
role: 'A role of some sort'
}
]
还有我的 nexy/prev 函数
nextSlide(event) {
event.preventDefault();
this.current_slide_number += 1;
},
prevSlide(event) {
event.preventDefault();
this.current_slide_number -= 1;
}
我希望有人能指出我正确的方向......?:)
解决方案
您需要添加v-if="cases.length-1!=current_slide_number"
对next
按钮的检查,以便在最后一种情况下隐藏它。
对于以前的按钮检查slide_number=0
将做v-if="current_slide_number!=0"
下面是片段
function callMe() {
var vm = new Vue({
el: '#root',
data: {
current_slide_number: 0,
cases: [{
id: 1,
title: "test1",
link: "http://tv2.dk",
role: 'A role of some sort'
},
{
id: 2,
title: "test2",
link: "http://tv2",
role: 'A role of some sort'
},
{
id: 3,
title: "test3",
link: "http://tv2",
role: 'A role of some sort'
},
{
id: 4,
title: "test4",
link: "http://tv2",
role: 'A role of some sort'
}
]
},
methods: {
nextSlide(){
this.current_slide_number++;
},
prevSlide(){
this.current_slide_number--;
}
}
})
}
callMe();
.case-slider__navigation{
width:40%
}
.prev{
float:left
}
.next{
float:right
}
h5{margin:0px}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.11/dist/vue.js"></script>
<div id='root'>
<div class="slide" v-for="(case_item, index) in cases" :key="case_item.id" v-show="current_slide_number === index" :class="{'is-active-slide': current_slide_number === index}">
<div class="case-slider__info">
<h5>{{case_item.role}} {{index}}</h5>
<h5>{{case_item.title}}</h5>
</div>
<div class="case-slider__image">
<img src="http://via.placeholder.com/200x100" />
</div>
</div>
<div class="case-slider__navigation">
<div class="next" v-if="cases.length-1!=current_slide_number">
<button @click="nextSlide">next</button>
</div>
<div class="prev" v-if="current_slide_number!=0">
<button @click="prevSlide">previous</button>
</div>
</div>
</div>
推荐阅读
- c++ - 为什么我会收到警告:不要取消引用可能无效的指针
- r - r中的循环共定位
- angular - 如何配置角度 SSL 以发送客户端证书?
- python - 是否可以在 Heroku 中部署 UDP 监听 python-server?
- sql - 2个表之间的多重关系
- django - 在 Django 中批量上传 .csv 文件的最佳做法是什么?
- wkhtmltopdf - wkhtmltopdf (pdfkit) 不能正确地将 HTML 转换为 PDF
- go - 匹配不同端点的 HTTP 请求 - gorilla mux
- google-drive-api - 必需的 Drive API 更新
- html - 使用烧瓶提交表单后出现“未找到”错误