项目需求介绍：

　　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. 浅谈java中==与equals的区别

    今天做了一个业务模块,需要简单的遍历比较值,所以习惯性的用了 "==" ,但是结果没有达到预想的结果是什么鬼? 看到这里,有人一定会指出这俩货不是基本变量! "关系操作符 ...

  2. Project 1 :创建链表与显示链表

    目标:创建一个链表,并将链表输出.结构体中包括学号与分数.链表以输入学号为0作为结束.输出模版为 No.学号 Score:分数 输入样例: 10101 98 10102 97 10103 100 10 ...

  3. UTF-8编码规则【转】

    hz_chenwenbiao UTF-8编码规则(转) UTF-8是Unicode的一种实现方式,也就是它的字节结构有特殊要求,所以我们说一个汉字的范围是0X4E00到0x9FA5,是指unicode ...

  4. 2015级软工实践k班第一次作业-准备

    第一次作业-准备······ 几篇文章阅读下来发现一个事实,还是要有明确的目标,清楚自己需要做什么最为重要.然后根据目标确定需要为之所做的准备工作,考研也好,工作也罢,都是服务于自己的目标. 问题答应 ...

  5. 团队作业4——第一次项目冲刺（Alpha版本） Day4

    借的今天有课,我们团队在课间时间开了简短的会议 2.Leangoo任务分解图: 3.会议结果,和任务分配 队员 今日进展 明日安排 林燕 试编写签到.请假功能的代码雏形 签到.请假功能成熟 王李焕 和 ...

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

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

  7. 201521123012 《Java程序设计》第三周学习总结

    一.本章学习总结 1.面对对象:(1)类 <1>属性 [1]外部类 [2]内部类 <2>方法 [1]j静态 [2]非静态 (2)对象 <1>创建对象 <2&g ...

  8. 201521123049 《JAVA程序设计》 第1周学习总结

    1. 本章学习总结 1.认识了新的一门计算机编程语言JAVA: 2.JAVA的编写与C语言类似,都是不能利用指针进行编写: 3.在实验课上初步认识JAVA并利用JAVA进行简单的编程,在实践上得到进一 ...

  9. select应用于read函数 超时非阻塞方式

    /* * "Timed" read - timout specifies the # of seconds to wait before * giving up (5th argu ...

  10. POJ 3190 Stall Reservations （优先队列）C++

    Stall Reservations Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7646   Accepted: 271 ...