vue项目中swiper组件的使用

最新推荐文章于 2025-07-23 09:45:18 发布

原创最新推荐文章于 2025-07-23 09:45:18 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #swiper #vue使用swiper组件

Vue 专栏收录该内容

128 篇文章

订阅专栏

本文详细介绍如何在Vue移动端项目中使用Swiper组件，包括在public/index.html中引入Swiper库，通过$nextTick确保DOM更新后初始化Swiper，以及在组件中实现触摸滑动效果。

一、需求问题

在vue的移动端项目中，我们可能需要用到各种各样的触摸滑动场景。swiper是一个非常好用的触摸滑动组件，在vue的移动端项目应用的也是比较多的。

二、需求分析

如果想要使用swiper，需要先在官网中进行下载 swiper-4.1.0.min.css 和 swiper-4.1.0.min.js 这两个文件，然后在vue项目中public文件夹下的index.html文件中进行引入。在vue当中，swiper可以使用在nextTick()函数中，这样确保数据请求完后，立马拿到更新后的DOM，并且进行显示。需要new一个swiper，在这个里面有两个参数，第一个需要使用到的DOM对象，第二个参数是一些配置项。对于vue中获得指定的DOM对象，我们可以通过refs进行获得。

三、需求实现

public 文件夹下的 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- user-scalable=no  防止用户点击缩放  -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="<%= BASE_URL %>css/common.css">
    <link rel="stylesheet" href="<%= BASE_URL %>css/iconfont/iconfont.css">
    <link rel="stylesheet" href="<%= BASE_URL %>libs/swiper-4.1.0.min.css">
    <script src="<%= BASE_URL %>libs/swiper-4.1.0.min.js"></script>
    <style>
      #app { display: flex; height: 100%; }
      #app div { margin: auto; }
    </style>
    <title>maoyan</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but maoyan doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <div>猫眼电影正在加载中...</div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

使用swiper的页面组件

<template>
    <div id="detailContainer" class="slide-enter-active">
        <Header title="影片详情">
            <i class="iconfont icon-right" @touchstart="handleToBack"></i>
        </Header>
        <Loading  v-if="isLoading"/>
		<div v-else  id="content" class="contentDetail">
			<div class="detail_list">
				<div class="detail_list_bg"  :style="{ 'background-image': 'url('+detailMovie.img.replace(/w\.h/,'148.208')+')'}"></div>
				<div class="detail_list_filter"></div>
				<div class="detail_list_content">
					<div class="detail_list_img">
						<img :src="detailMovie.img | setWH('148.208')" alt="">
					</div>
					<div class="detail_list_info">
						<h2>{{ detailMovie.nm }}</h2>
						<p>{{ detailMovie.enm }}</p>
						<p>{{ detailMovie.sc }}</p>
						<p>{{ detailMovie.cat }}</p>
						<p>{{ detailMovie.src }} / {{ detailMovie.dur}}分钟</p>
						<p>{{ detailMovie.pubDesc }}</p>
					</div>
				</div>
			</div>
			<div class="detail_intro">
				<p>{{ detailMovie.dra }}</p>
			</div>
			<div class="detail_player swiper-container" ref="detail_player">
				<ul class="swiper-wrapper">
					<li v-for="(item,index) in detailMovie.photos" :key="index"  class="swiper-slide">
						<div>
							<img :src="item | setWH('40.27')" alt="">
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>    
</template>

<script>
import Header from '@/components/Header';

export default {
    name: 'Deatil',
    data() {
        return {
            detailMovie: {},
            isLoading: true
        }
    },
    components: {
        Header
    },
    props: ['movieId'],
    methods: {
        handleToBack() {
            this.$router.back();
        }
    },
    mounted() {
        this.axios.get('/detailmovie?movieId='+ this.movieId).then((res) => {
            var msg = res.data.msg;
            if ( msg === 'ok' ) {
                this.isLoading = false;
                this.detailMovie = res.data.data.detailMovie;
                // 在数据请求完以后，DOM更新后获得最新的，执行延迟回调
                this.$nextTick(() => {
                    new Swiper(this.$refs.detail_player , {
                            slidesPerView : 'auto',
                            freeMode : true,
                            freeModeSticky: true
                    });
                });
            }
        });
    }
}
</script>

<style scoped>
.detailContainer { position: absolute; top: 0; z-index: 100; left: 0; width: 100%; min-height: 100%; background: #fff; }
.detailContainer .slide-enter-active { animation: .3s slideMove;}
@keyframes slideMove {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}
#content.contentDetail{ display: block; margin-bottom:0;}
#content .detail_list{ height:200px; width:100%; position: relative; overflow: hidden;}
.detail_list .detail_list_bg{ width:100%; height:100%; background:  0 40%; filter: blur(20px); background-size:cover; position: absolute; left: 0; top: 0;}
.detail_list .detail_list_filter{ width:100%; height:100%; position: absolute;background-color: #40454d;opacity: .55; position: absolute; left: 0; top: 0; z-index: 1;}
.detail_list .detail_list_content{ display: flex; width:100%; height:100%; position: absolute; left: 0; top: 0; z-index: 2;}
.detail_list .detail_list_img{ width:108px; height: 150px; border: solid 1px #f0f2f3; margin:20px;}
.detail_list .detail_list_img img{ width:100%; height: 100%;}
.detail_list .detail_list_info{ margin-top: 20px;}
.detail_list .detail_list_info h2{ font-size: 20px; color:white; font-weight: normal; line-height: 40px;}
.detail_list .detail_list_info p{ color:white; line-height: 20px; font-size: 14px; color:#ccc;}

#content .detail_intro{ padding: 10px;}
#content .detail_player{ margin:20px;}
.detail_player .swiper-slide{ width:70px; margin-right: 20px; text-align: center; font-size: 14px;}
.detail_player .swiper-slide img{ width:100%; margin-bottom: 5px;}
.detail_player .swiper-slide p:nth-of-type(2){ color:#999;}

</style>