vue中swiper仿去哪儿网相册

深碍√TFBOYSˉ_ 2021-09-29 18:52 308阅读 0赞

# 效果图 #

![在这里插入图片描述][20190717113118954.gif]

# 下载Swiper #

版本：" vue-awesome-swiper " : " ^3.1.3 "，用的是 Swiper4.x 配置选项

npm install vue-awesome-swiper --save

# 下载CSS预编译器 #

本人使用的是 stylus，使用其他预编译器亦可

npm install stylus --save
    npm install stylus-loader --save

# 引入并安装Swiper #

在 main.js 文件里引入并安装 ( 这里是 Vue3.0 的模板 )

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    
    import 'swiper/dist/css/swiper.css'
    
    Vue.use(VueAwesomeSwiper)
    
    Vue.config.productionTip = false
    
    new Vue({ 
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

# 在public目录下创建static文件夹 #

把图片放入 static 文件夹中 ( 这里是 Vue3.0 的模板 )  
![在这里插入图片描述][20190717111346395.jpg]

# 在组件中使用Swiper #

<template>
      <div class="home">
        <div class="bannerArr">
    	  <div class="img-item" v-for="(item,index) in banners" @click="showImgList(index)">
    		<img class="img" :src="item.imgUrl"/>
    	  </div>
    	</div>
    	<div class="wrapper" v-show="isShow" @click="hideImgList">
    	  <div class="content">
    	    <swiper :options="swiperOption" ref="mySwiper">
    		  <swiper-slide v-for="item in banners">
    		    <img class="swiper-img" :src="item.imgUrl" alt=""/>
    		  </swiper-slide>
    		  <div class="swiper-pagination" slot="pagination"></div>
     		</swiper>
    	  </div>
    	</div>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'home',
      data () { 
      	return { 
      	  isShow: false,
      	  banners: [
    		{  imgUrl: 'static/1.jpg' },
    		{  imgUrl: 'static/2.jpg' },
    		{  imgUrl: 'static/3.jpg' },
    		{  imgUrl: 'static/4.jpg' },
    		{  imgUrl: 'static/5.jpg' },
    		{  imgUrl: 'static/6.jpg' },
    		{  imgUrl: 'static/7.jpg' },
    		{  imgUrl: 'static/8.jpg' },
    		{  imgUrl: 'static/9.jpg' }
    	  ],
    	  swiperOption: { 
    	  	pagination: { 	
              el: '.swiper-pagination',    // 分页器容器的css选择器或HTML标签
              type: 'custom',   // 分页器样式类型 custom: 自定义
              // 自定义特殊类型分页器，当分页器类型设置为自定义时可用
              renderCustom: function (swiper, current, total) { 
                return '<span class="swiperPag">' + current + '<i class="line">/</i>' + total + '</span>'
              }
            },
            spaceBetween: 15    // slide之间的距离（单位px）
          }
        }
      },
      methods: { 
      	// 显示相册并跳到指定的slide
      	showImgList (index) { 
      	  this.isShow = true
      	  this.$refs.mySwiper.swiper.slideTo(index, 0, false)  // 控制Swiper切换到指定slide
      	},
      	// 隐藏相册
      	hideImgList () { 
      	  this.isShow = false
      	}
      }
    }
    </script>
    <style lang="stylus" scoped>
    .home 
      width: 100%;
      height: 100%;
      position: relative;
      .bannerArr 
    	width: 100%;
    	padding: 2.5px;
    	box-sizing: border-box;
    	display: flex;
    	flex-wrap: wrap;
        .img-item 
    		width: 50%;
    		height: 120px;
    		padding: 2.5px;
    		box-sizing: border-box;
          .img 
    		width: 100%;
    		height: 100%;
    		border: 1px solid #E3E3E3;
      .wrapper 
    	width: 100%;
    	height: 100%;
    	background: black;
    	position: fixed;
    	top: 0;
    	left: 0;
    	z-index 9;
    	.content
    	  width: 100%;
    	  margin: 30% auto 0;
    	  >>> .swiper-container
    		overflow: visible;
    		.swiper-img
    		  width: 100%;
    		  >>> .swiper-pagination
    			bottom: -15%;
    			.swiperPag
    			  color: #fff;
    			  .line
    				font-style:normal;
    				margin: 0 3px;
    </style>

[20190717113118954.gif]: /images/20210812/02f694b0e3c145b2aca49056fbdc904a.png
[20190717111346395.jpg]: /images/20210812/07a6e5101dfb43e3ac9c630f0a63f62f.png