项目需求介绍：

　　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. 3_SQL Server通过代码的方式添加数据

    --通过代码添加数据 --第一种方式--insert into 表名(列名1,列名2,...)values (值1,值2,...)insert into Department(DepName, Dep ...

  2. IOS学习【VMware 12 安装 Mac OS X 10.11】-Day1

    1.下载安装VMware 12 pro  (32位不能安装) 虚拟机 VM12密钥 5A02H-AU243-TZJ49-GTC7K-3C61N 2.unlock206 用于VMware 12识别tac ...

  3. 转深入Java虚拟机　之四：类加载机制

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17881581 类加载过程     类从被加载到虚拟机内存中开始,到卸载出内存为止,它的整个 ...

  4. python--购物车优化

    基本要求:用户入口1.商品信息存在文件里 2.已购商品.余额记录,长期保存, 即第一次启动是需要输入预算的,以后就拿剩下的钱买东西 商家入口 1.可以添加商品,删除商品,修改商品价格 2.按q可以退出 ...

  5. 201521123103 《Java学习笔记》 第五次学习总结

    一.本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. (1).接口更灵活.更方便,可以方便的为现有的系统添加新的功能. (2).is-a ...

  6. 201521123056《Java程序设计》 第2周学习总结

    1. 本周学习总结 String类: 不可变字符串型: 粗略介绍了枚举类型: 完全限定类名: 泛型数组列表的应用: 2. 书面作业 Q1.使用Eclipse关联jdk源代码,并查看String对象的源 ...

  7. 201521123076 《Java程序设计》 第十四周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  8. 201521123039 《java程序设计》第十二周学习总结

    1. 本周学习总结 2. 书面作业 将Student对象(属性:int id, String name,int age,double grade)写入文件student.data.从文件读出显示. 字 ...

  9. 201521123001《Java程序设计》第11周学习总结

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

  10. 201521123030 《Java程序设计》 第10周学习总结

    1. 本周学习总结 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 在fi ...