当前位置：首页 > news >正文

Vue与swiper相结合封装全屏轮播插件

news 来源：原创 2024/5/5 14:15:17

项目需求介绍：

　　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);
        }
    }

});