Vue Swiper 横纵向滑动+页面索引跳转
Swiper组件确实是个好东西啊。结合最近所学,做了个Swiper 横纵向滑动+页面索引跳转的小页面。直接上图:swiper引入到Vue就不多说了,直接参考官网。首先理清思路:纵向的swiper包含横向的swiper,右上角的页面索引控制纵向的swiper并同步。页面布局:<template><div class="main">...
·
Swiper组件确实是个好东西啊。
结合最近所学,做了个Swiper 横纵向滑动+页面索引跳转的小页面。
直接上图:
swiper引入到Vue 就不多说了,直接参考官网。
首先理清思路:纵向的swiper包含横向的swiper,右上角的页面索引控制纵向的swiper并同步。
页面布局:
<template>
<div class="main">
<!-- 索引竖线 -->
<div class="nav" style="float: right;margin-right: 50px;position:absolute;top: 0;right: 0;color: white; z-index:2;border-left: 1px solid #909399 ">
<!-- 索引小圈圈,会随着纵向的swiper改变而改变位置 -->
<img src="https://data.ehometd.com/files/1/25/729/4689.1561463870.png?v=36099" style="width:14px;height:14px;position:absolute;left:-8px;transition:top 1s " :style="{top:top+'px'}" >
<ul style="float: right;margin-left:10px">
<!-- 根据当前纵向的总数量for出索引按钮,索引按钮会根据点击与选择改变样式 -->
<li v-for="item,index in li" class="item" :class="{'active': nowIndex===index}" @click="openswiper(index)">
{{item}}
</li>
</ul>
</div>
<!-- 纵向swiper -->
<swiper :options="VOption" ref="mySwiper" @chan>
<swiper-slide v-for="item in num">
<!-- 横向swiper -->
<div align="center">
<swiper :options="HOption">
<swiper-slide v-for="items in item.img"><img v-bind:src="items"></swiper-slide>
<div class="swiper-pagination swiper-pagination-bullets" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
</swiper-slide>
<div class="swiper-pagination swiper-p1" slot="pagination"></div>
</swiper>
</div>
</template>
逻辑:
<script>
export default {
data() {
var _this=this;
return {
top:28,
nowIndex:0,
// 纵向swiper内容
li:["家装四大陷阱","家装陷阱一","家装陷阱二","家装陷阱三","家装陷阱四"],
// 横向swiper内容
num:[
{
img:['https://data.ehometd.com/files/1/25/729/4678.1561455224.png?v=53243']
},
{
img:['https://data.ehometd.com/files/1/25/729/4673.1561455184.png?v=53243','https://data.ehometd.com/files/1/25/729/4674.1561455187.png?v=53243',"https://data.ehometd.com/files/1/25/729/4675.1561455190.png?v=53243","https://data.ehometd.com/files/1/25/729/4676.1561455193.png?v=53243","https://data.ehometd.com/files/1/25/729/4677.1561455197.png?v=53243"]
},
{
img:['https://data.ehometd.com/files/1/25/729/4679.1561455976.png?v=80589','https://data.ehometd.com/files/1/25/729/4680.1561460790.png?v=2013',"https://data.ehometd.com/files/1/25/729/4681.1561460792.png?v=2013","https://data.ehometd.com/files/1/25/729/4682.1561460795.png?v=2013","https://data.ehometd.com/files/1/25/729/4683.1561460798.png?v=2013"]
},
{
img:['https://data.ehometd.com/files/1/25/729/4670.1561455015.png?v=2013','https://data.ehometd.com/files/1/25/729/4671.1561455018.png?v=2013',"https://data.ehometd.com/files/1/25/729/4684.1561460801.png?v=2013","https://data.ehometd.com/files/1/25/729/4685.1561460804.png?v=2013","https://data.ehometd.com/files/1/25/729/4686.1561460806.png?v=2013"]
},
{
img:['https://data.ehometd.com/files/1/25/729/4672.1561455022.png?v=53243']
},
],
// 纵向swiper初始参数
VOption: {
// 方向
direction: 'vertical',
// 同时显示数量
slidesPerView: 1,
// 初始页面
initialSlide :0,
// 滑动距离多少才执行,对于同时有横纵向特别重要
threshold : 50,
// 循环
loop:true,
// 这里是滑动后索引的同步
on: {
slideChangeTransitionStart: function(){
_this.nowIndex=this.realIndex
_this.top=_this.nowIndex*36+28;
console.log(this.nowIndex)
}
},
// 分页器导航
pagination: {
//el: '.swiper-p1',
clickable: true
}
},
HOption: {
slidesPerView: 1,
spaceBetween:30,
threshold : 10,
loop:true,
pagination: {
el: '.swiper-pagination-bullets',
clickable: true,
dynamicBullets: true,
dynamicMainBullets: 2,
// 切换成数字模式
renderBullet(index, className) {
return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`
}
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
},
computed:{
// 初始化获得swiper
swiper(){
return this.$refs.mySwiper.swiper;
}
},
methods:{
// 索引跳转方法
openswiper(index){
// console.log('a');
// console.log(this.swiper.activeIndex);
this.swiper.slideTo(index+1, 1000, false);
this.top=index*36+28;
this.nowIndex=index
}
}
}
</script>
样式:
<style>
.item{
line-height: 36px;
letter-spacing: 2px;
list-style: none;
}
body{
margin: 0 auto;
background:#1a1a1a;
}
ul{
padding: 0px ;
padding-left: 10px
}
img{
/*width: 100%;*/
height: 100%;
}
.active{
color: #c5a36e;
}
.main{
width: 100%;
height: 100%
}
.my-bullet-active{
}
.swiper-container {
width: 100%;
height: 100vh;
}
.swiper-pagination-bullet-custom {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: #000;
opacity: 1;
/*background: rgba(0,0,0,0.2);*/
}
.swiper-pagination-bullet-custom.swiper-pagination-bullet-active {
color: #fff;
background: #c5a36e;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)