Vue中使用swiper轮播图展示并可点击查看大图

最新推荐文章于 2025-06-18 14:38:14 发布

weixin_33961829

最新推荐文章于 2025-06-18 14:38:14 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/leonaLily/blog/1486916

本文介绍了在Vue项目中使用swiper实现轮播图，并且支持点击图片查看大图的详细步骤。包括安装swiper，组件化开发轮播图组件和大图查看组件，以及处理图片加载、滑动加载更多图片、图片比例适应和动态显示大图的技巧。同时提到了针对华为低版本浏览器的适配方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

最近一直使用vue开发，现需求是在首页展示轮播图，点击当前的轮播图可以展开相应的大图，大图要与点击的图片一致。

由于图片大小不一，在首页展示的图片定宽高，难免会出现图片拉抻或者显示不全，所以针对首页的轮播图使用背景图片进行设置，而点开的大图要求点击非图片区域才能关闭大图，所以大图需要使用img图片来进行设置；

由于图片的列表是后台，会出现三十张以上的图片的情况，为了性能问题，首次只加载三张，判断滑动防线，动态添加图片；

这里涉及到三个模块组件，引用轮播图的组件imageDemo.vue，轮播图组件tjImageViewer.vue，大图轮播图组件tjImageView.vue；目的是把轮播单独做成公共组件，需要的地方即可使用；

一下是对项目关键点的记录，方便以后swiper的开发使用；

安装swiper，引用swiper
npm install swiper --save
package.json中dependencies中会出现swiper以及其版本号 "swiper": "^3.4.2"

swiper使用的地方并不是全局，不需要像网上的介绍，全局设置他，这样反倒会拖累整个项目性能，我们就是哪里需要他，就在那个模块里面引用他；
直接在需要的模块这样引用即可 import swiper from 'swiper'
这里需要注意一点，这样处理之后我发现页面中swiper的样式没有加载进来，如果你也在项目中发现swiper的样式并没有加载进来，可以去官网单独下载一个swiper-3.4.2.min.css，放到项目中，然后引用即可 import '@/assets/css/swiper-3.4.2.min.css'

imageDemo.vue引用轮播图组件

<template>

	<div>
		<tjImageView v-if="pictureList" :isShowImage=true :pictureList="pictureList"/>
		<p>测试</p>
	</div>
	
</template>

<script>
import tjImageView from '@/components/tjImageSwiper/tjImageViewer.vue'
export default {
	data(){
		return{
			"pictureList": [
		      {
		        "title": "图片1",
		        "url": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2934496992,3598063540&fm=11&gp=0.jpg",
		        "albumUrl": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2934496992,3598063540&fm=11&gp=0.jpg"
		      },
		      {
		      	"title": "图片2",
		        "url": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2371473704,3551433037&fm=11&gp=0.jpg",
		        "albumUrl": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2371473704,3551433037&fm=11&gp=0.jpg"
		      },
		      {
		      	"title": "图片3",
		        "url": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=18316473,2208919738&fm=26&gp=0.jpg",
		        "albumUrl": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=18316473,2208919738&fm=26&gp=0.jpg"
		      },
		      {
		      	"title": "图片4",
		        "url": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2073957860,627365983&fm=26&gp=0.jpg",
		        "albumUrl": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2073957860,627365983&fm=26&gp=0.jpg"
		      },
		      {
		      	"title": "图片5",
		        "url": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2426877307,3319849068&fm=26&gp=0.jpg",
		        "albumUrl": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2426877307,3319849068&fm=26&gp=0.jpg"
		      }
    		]
		}
	},
	c