1. 需求
手机端页面,滑动一下切换到下一屏,第二屏第三屏子元素里面要左右可以切换
效果图如下
2. 实现方式
<template>
<swiper1 :options="swiperOption" ref="swiperOption">
<swiper-slide>第一屏
</swiper-slide>
<swiper-slide>第二屏
<div>
<swiper2 :options="menuContentOption" ref="page2Swiper">
<swiper-slide>11
</swiper-slide>
...
<div class="swiper-pagination2" slot="pagination"></div>
</swiper2>
</div>
</swiper-slide>
<swiper-slide>第三屏(以此类推)
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper1>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default{
components:{
swiper1:swiper,
swiper2:swiper,
swiper3:swiper,
swiperSlide
},
data() {
return {
swiperOption: {
direction: 'vertical', // 垂直滑动
height: document.body.clientHeight // 获取可见视口元素的高度
},
swiperBtnPage:'swiper-pagination',
menuContentOption: {
pagination: {
el: '.swiper-pagination2',
type: 'bullets',// 点点
}
},
page3SwiperOption: {
pagination: {
el: '.swiper-pagination3',
type: 'bullets',// 点点
clickable: true
}
}
}
}
}
</script>
网友评论