项目需求介绍：

　　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中super关键字

    1.子类的构造函数如果要引用super的话,必须把super放在函数的首位,如果想用super继承父类构造的方法,但是没有放在第一行的话,那么在super之前的语句,肯定是为了满足自己想要完成某些行为 ...

  2. Linux安装简介

    一.基本简介 Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统. Linux能运行主要的UNIX工具软件.应用程序 ...

  3. js 你所不知道的一面

    你真的知道JavaScript吗 JavaScript是一门奇怪的语言,要真正掌握并不容易.废话不多说,来一个快速测试,5道题目,看看你对JavaScript是否真正掌握.准备好了吗?开始咯

  4. mysql 5.7 Warning: Using a password on the command line interface can be insecure. 解决方案

    百度了好多,发现都是lunix环境下的,没有找到windows和OS 的,在lunix环境下的解决方案一般就是修改数据库配置文件 my.conf 在Windows 中是没有my.cnf 文件,而是叫做 ...

  5. 九度OJ 1016 火星A+B AC版

    #include <iostream> #include <string.h> #include <sstream> #include <math.h> ...

  6. 【Beta阶段】第六次scrum meeting

    Coding/OSChina 地址 1. 会议内容 学号 主要负责的方向 昨日任务 昨日任务完成进度 接下去要做 99 PM 着手联网功能 100% 配合100完成联网功能 100 DEV 完善服务器 ...

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

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 控制可见性的4个访问修饰符 private -- 仅对本类可见 public -- 对所有类 ...

  8. 201521123018 《Java程序设计》第4周学习总结

    1. 本章学习总结 2. 书面作业 Q1.注释的应用:使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) Q2.面向对象设计(大作业1-非常重要) 2.1 讲故事 ...

  9. CMD命令查询DNS服务器

    我们先了解"tracert"命令,如图 tracert命令 这是路由跟踪命令,你打开网站通过了哪些网关都能看出来,比如: tracert命令 这是路由跟踪命令,你打开网站通过了哪些 ...

  10. #黑客攻防实战详解#[Chapter 1]

    1.1 ①配置模拟入侵环境 ②配置网络拓扑