美文网首页
一个单页面应用多个swiper

一个单页面应用多个swiper

作者: 地主家也没余粮叻 | 来源:发表于2019-03-19 01:43 被阅读0次
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>

相关文章

  • 一个单页面应用多个swiper

    1. 需求 手机端页面,滑动一下切换到下一屏,第二屏第三屏子元素里面要左右可以切换 2. 实现方式

  • vue-router考察问题

    单页应用和多页应用的区别 多页应用MPA单页应用SPA应用组成由多个完成页面构成一个外部显示的页面 + 多个局部页...

  • vue 打包多页面应用解决方案

    传统的vue都是spa应用,也就是俗称的单页面应用。但是有些情况下我们可能需要将多个单页面应用整合在一个项目里,这...

  • swiper4.5.1在Vue中的应用

    swiper4在vue的应用 swiper4安装 swiper4在单文件组件中的使用 在单文件组件

  • 记录一下对swiper4.x.js在H5单页中的滑动优化

    应用场景 仅仅应用于单页应用的滑动操作,用swiper4.x接管页面的滚动操作。用来支持顶部和尾部的回弹效果,进一...

  • vue应用页面跳转解析

    vue开发的应用一般是单页应用,涉及到页面切换时,通常使用vue-router。然而一个页面可以包含多个组件,这里...

  • 学习笔记-浏览器内多个标签页之间的通讯

    学习笔记-浏览器内多个标签页之间的通讯 Redux vuex 这个是单页面应用里跨页面状态管理 多页应用 跨页面数...

  • 6. Vue 引入vuex store

    0.开始之前 如果打算开发一个大型的单页应用,使用vuex比较合适。它可以让页面中多个组件共享变量,即单页面中全局...

  • web系统方案探究

    当需要开发一个管理端系统,你会考虑什么技术选型了? 单页面or多页面 单页面应用,或者是多页面应用? 单页面渲染速...

  • SAP Spartacus的单页面应用特性

    单页面应用single page Application,这也是Spartacus命名的由来。单页面应用,是由一个...

网友评论

      本文标题:一个单页面应用多个swiper

      本文链接:https://www.haomeiwen.com/subject/vbqwmqtx.html