项目需求介绍：

　　1.页面图文混排，

　　2.点击图片后全屏展示图片，并在底部显示文字，如果没有则不显示

　　3.关闭全屏后依然停留在上次浏览的位置

　　4.浏览图片时，不管点击的哪张图片，全屏展示的时候也要显示这一张

以下是所有需要引用的文件，其中只有 reset.css，swiperM.css，swiperVue.js  是自己写的

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="swiper.min.css">
<link rel="stylesheet" href="swiperM.css">
<script src="vue.js"></script>
<script src="swiper.min.js"></script>
<script src="swiperVue.js"></script>
<script src="axios.min.js"></script>

reset.css文件
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}caption,th,td{text-align:center}fieldset,img,abbr,acronym{border:0}abbr,acronym{font-variant:normal}h1,h2,h3,h4,h5,h6,p{font-size:100%;font-weight:normal;line-height:1}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}address,caption,cite,code,dfn,em,th,var,i,strong,font{font-style:normal;font-weight:normal}code,kbd,pre,samp{font-family:courier new,courier,monospace}li{list-style:none}textarea{resize:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}table{border-collapse:collapse;border-spacing:0}ul,li,menu,dir{display:block;list-style-type:disc;-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:0}q:before,q:after{content:''}input:focus,a:focus{outline:0}a,button,input,legend{-webkit-tap-highlight-color:rgba(255,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;appearance:none;-webkit-appearance:none;outline:0}*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;word-break:break-all;word-wrap:break-word;}a{color:inherit;text-decoration:none;cursor:pointer}ul,li{width:100%;height:auto;overflow:hidden}li{clear:both}a:visited{color:inherit}a:hover{color:inherit}a:active{color:inherit}.fl{float:left}.fr{float:right}.cl{clear:both}

swiperM.css文件

.swiper-container,#swi_con{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: black;
    z-index: 10000000000000000000000000000000000000;
}
.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left:50%;
    top: 50%;
}
.swiper-slide img{
    width: 100%;
    position: absolute;
    text-align: center;
    left:50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: 0;
}
.swiper-slide span{
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    color: #ffffff;
    font-size: 0.37333333333333335rem;
    box-sizing: border-box;
    padding: 0.32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    max-height: 2.96rem;
}
.swiper-slide-p{
    color: #ffffff;
    position: absolute;
    width: 100%;
    bottom: 0.233333rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:5;
    -webkit-box-orient: vertical;
    max-height: 2.1866666666666665rem;
    font-size: 0.42666666666666664rem;
}

JSON文件
{
  "exclude": [
    {"img":"images/timg1.jpg","title":"我是图片的文字描述0"},
    {"img":"images/timg2.jpg","title":"我是图片的文字描述1"},
    {"img":"images/timg3.jpg","title":"我是图片的文字描述2"},
    {"img":"images/timg4.jpg","title":"我是图片的文字描述3"},
    {"img":"images/timg5.jpg","title":"我是图片的文字描述4"},
    {"img":"images/timg1.jpg","title":"我是图片的文字描述5"},
    {"img":"images/timg2.jpg","title":"我是图片的文字描述6"},
    {"img":"images/timg3.jpg","title":"我是图片的文字描述7"},
    {"img":"images/timg4.jpg","title":"我是图片的文字描述8"},
    {"img":"images/timg5.jpg","title":"我是图片的文字描述9"}
  ]
}

HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>swiper轮播组件</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="swiper.min.css">
    <link rel="stylesheet" href="swiperM.css">
    <script src="vue.js"></script>
    <script src="swiper.min.js"></script>
    <script src="swiperVue.js"></script>
    <script src="axios.min.js"></script>
    <style>
        .main .img{
            width: 100%;
            margin-bottom: 10px;
        }
        .main .img img{width: 100%;height:10rem;}
    </style>

    <!--swiper全屏轮播Vue组件封装-->
    <!--使用方法：
            1、在主页面中使用  <swiper-vue></swiper-vue>
            2、需要传递的参数
                a)在<swiper-vue></swiper-vue>里面加入要循环的数据，组件中有slot接收
                b)index--为点击后的需要传递到swiper中的图片坐标
                c)Okshow--要设置swiper的显示与隐藏，开始要设置为false,点击图片后设置为true
                d)scroll--为滚动条的位置，关闭swiper后要对滚动条位置进行还原
    -->
</head>
<body>
    <div class="main">
        <div class="img_list" v-show="mainShow">
            <div class="img" v-for="(item,index) in list" @click="swiper(index)">
                <img :src="item.img">
                <p>{{item.title}}</p>
            </div>
        </div>
        <swiper-vue
                :index="Index"
                :Okshow="Okshow"
                :scroll="scroll"
                v-on:receive="changeValueHandle(scroll)">
                <div class="swiper-slide" v-for="item in list">
                    <img :data-src='item.img' class="swiper-lazy">
                    <p class="swiper-slide-p">{{item.title}}</p>
                    <div class="swiper-lazy-preloader"></div>
                </div>
        </swiper-vue>
    </div>
    <script>
        var vm=new Vue({
            el:".main",
            data:{
                list:[],
                Index:0,
                mainShow:true,
                Okshow:false,
                scroll:0
            },
            mounted(){
                axios.get('js1.json')
                        .then(function(data){
                            vm.list=data.data.exclude;
                        })
                        .catch(function(error){
                            console.log(error);
                        });
            },
            methods:{
                swiper(index){
                    this.Index=index;
                    this.mainShow=false;
                    this.Okshow=true;
                    this.scroll=document.body.scrollTop;
                },
                changeValueHandle: function (scroll) {
                    this.mainShow=true;
                    this.Okshow=false;
                    setTimeout(function(){
                        document.body.scrollTop=scroll;
                    },1);
                }
            }
        })
    </script>
</body>
</html>

swiperVue.js文件

Vue.component("swiper-vue",{
    props:['index','Okshow','scroll'],
    updated: function () {
        //swiper初始化
        if(this.Okshow){
            swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                paginationClickable: true,
                spaceBetween:0,
                centeredSlides: true,
                initialSlide:this.index,
                autoplayDisableOnInteraction: false,
                lazyLoading:true,
                lazyLoadingInPrevNext : true,
                lazyLoadingInPrevNextAmount :2,
                lazyLoadingOnTransitionStart : true
            });
        }

    },
    template:`<div class="swiper-container" id="swi_con" v-show="Okshow" @click="swiperClose(scroll)">
                <div class="swiper-wrapper">
                    <slot></slot>
                </div>
            </div>`,
    methods:{
        swiperClose:function(scroll){
            this.$emit("receive",scroll);
        }
    }

});




Vue与swiper想结合封装全屏轮播插件的更多相关文章

  1. 关于最近在做的一个js全屏轮播插件

    最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用m ...

  2. 图片全屏轮播插件poposlides

    jQuery轻量级全屏自适应焦点图插件poposlides 在线演示本地下载

  3. 全屏轮播插件 fullPage.js应用(基础版兼容IE7， 背景图版兼容IE8)

    /** * fullPage 1.4.5 * https://github.com/alvarotrigo/fullPage.js * MIT licensed * * Copyright (C) 2 ...

  4. 全屏banner及全屏轮播

    一.全屏banner 1.设置网页图片全屏banner <!DOCTYPE html> <html lang="en"> <head> < ...

  5. javascript无缝全屏轮播

    虽然平时能利用插件来实现,但是总是觉得,如果连个无缝轮播都写不出来,还玩个毛线: 其实现在还真的是玩毛线,因为代码都是别人的,不过嘛,很快就变成是我的啦! 代码还没封装成插件,其实我也还没弄清楚. 下 ...

  6. 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中

    效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...

  7. Swiper 移动端全屏轮播图效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  8. 基于Ascensor.js全屏切换页面插件

    今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  9. 使用Swiper轮播插件引起的探索

    提到Swiper轮播插件,小伙伴们应该不会感到陌生.以前我主要在移动端上使用,PC端使用较少. 注:这里需要注意的是,在PC端和移动端使用Swiper是不同的 官方给的版本有三个,分别是Swiper2 ...

随机推荐

  1. ！Web云笔记--HTML基础

    Web自学笔记第一阶段笔记综合汇总 参考资料:<Head First HTML&CSS>(中文第二版)(美国)弗里昂ISBN:9787508356464 中国电力出版社 全部阶段: ...

  2. python--对于装饰器的理解

    1.首先,有个原来写好的函数,完成一定的功能,比如下面的,就打印一句话(某程序被调用).简单点,容易帮我们想清楚程序是怎么执行的. ''' 原函数 ''' def fun1(): print(&quo ...

  3. 201521123050 《Java程序设计》第6周学习总结

    1. 本周学习总结 2. 书面作业 1.clone方法 1.1 Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 答:(1)x.clone ...

  4. 201521123063 《Java程序设计》第三周学习总结

    1.本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 2.书面作业 ...

  5. 201521123035《Java程序设计》第一周学习总结

     1.本周学习总结 本周学习了Java从诞生到如今的部分历史,并通过了老师的课堂演示了解了Java在cmd中的编译过程.然后还学习了JDK,JRE,JVM. 2. 书面作业 1.为什么java程序可以 ...

  6. 预防黑客入侵 防黑必学的cmd命令vs网络安全

    这些命令又可*********三类:网络检测(如ping).网络连接(如telnet)和网络配置(如netsh).前面两种相对简单,本文只介绍两个网络配置工具.自带的关于网络的命令行工具很多,比如大家 ...

  7. 201521123073 《Java程序设计》第13周学习总结

    1. 13周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jm ...

  8. 201521123089 《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 Q1.互斥访问与同步访问 1.1 除了使用synchronized修饰方 ...

  9. JavaScript的5中基本数据类型

    javascript的5种基本数据类型有: Undefined,Null,Bollean,Number,String,1种复杂数据类型:Object. 1Boolean类型 将一个值转换为Bollea ...

  10. weblogic服务器上类或者方法找不到的解决办法

    下面以eclipse-birt(报表)为例,介绍这种问题出现的原因以及解决之道: 分析比较好的见:http://developer.actuate.com/community/forum/index. ...