Table of contents
Official website of swiper plug-in: https://www.swiper.com.cn/
1. Download the plugin
- Download plugin command
// 下载最新版本（我下载最新版本有问题） npm install vue-awesome-swiper --save // 下载指定版本（3.1.3） npm install [email protected] --save // 下载 vue-awesome-swiper 插件时同时也下载了 swiper 插件，不用我们手动下载 swiper 插件 - [Note] When downloading the plug-in, there will be various errors (the XXX file path cannot be found)
- Problem : When importing a package, webpack looks for the package file path to find the corresponding index.js file in the download package directory (or src/index.js?):
①Download the latest vue-awesome-swiper package and there is this index.js file, but one needs to be imported in the file , and the corresponding index.js file cannot be found'swiper/vue'in the vue directory in the swiper package ; It will report an error and cannot find index.js under vue-awesome-swiper (these two errors are very confusing, and I don’t know why)没有 index.js - Solution : After a weekend, delete the node_modules downloaded before, and
淘宝镜像download all the packages again, and the error that the path could not be found before did not appear again (version 3.1.3 downloaded by vue-awesome-swiper). - Reason
私服地址: It may be caused by the company's image used to download the package at the beginning ? But at the beginning, Taobao mirrors were also used to download packages, and there were other file paths that could not be found. - Confused : the last downloaded version 3.1.3 package has no index.js file in the root directory of the package, why is it not reporting an error? So when webpack searches for the package file path, should it find index.js in the root directory or src/index.js in the root directory? ? ?
- Problem : When importing a package, webpack looks for the package file path to find the corresponding index.js file in the download package directory (or src/index.js?):
2. Steps to use
[Remarks] Here is to use the swiper component in a separately packaged component, and the value in the code is the image array to be displayed
- Import plugins, css files and register components locally
- Use the swiper component
- carousel options configuration information
<!-- 现场照片轮播 -->
<template>
<div class="imgSwiper">
<!-- 【第二步】使用swiper组件 -->
<Swiper
v-if="value && value.length"
ref="swiperRef"
class="swiper-wrapper"
:options="swiperOption"
>
<swiper-slide v-for="(item, index) in value || []" :key="index">
<el-image
:src="sysConfigData.mon_znfx_videopath + item.bkgUrl"
:preview-src-list="value.map(imgItem => sysConfigData.mon_znfx_videopath + imgItem.bkgUrl)"
>
</el-image>
</swiper-slide>
<!-- <div class="swiper-pagination" slot="pagination"></div> -->
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</Swiper>
<div v-else class="noImg">暂无现场照片</div>
</div>
</template>
<script>
import {
mapGetters } from 'vuex'
/**** 【第一步】导入插件、css文件 并 局部注册组件 ****/
import {
swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
name: '',
components: {
// 局部注册组件
swiper,
swiperSlide
},
props: {
/**** 父组件传给子组件（当前组件）的图片数组 ****/
value: {
type: Array,
defult: []
}
},
data() {
return {
/**** 【第三步】：【轮播图配置信息】 ****/
swiperOption: {
loop: false, // 是否循环轮播
autoplay: true, // 是否可以自动轮播
// delay: 1000, // 1秒切换一次（我加了但是好像没有用，就又去掉了）
slidesPerView: 5, // 可视区域内可展示多少个块
spaceBetween: 15, // 块之间间隔距离
initialSlide: 0, // 默认初始显示块
centeredSlides: true, // 当前 active slide 居中
slideToClickedSlide: true, // 点击的 slide 会居中
freeMode: false,
// 显示分页（当前页面展示的图片有时会很多，暂时不要分页的小圆点）
// pagination: {
// el: '.swiper-pagination',
// clickable: true
// },
// 设置点击箭头
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
},
computed: {
...mapGetters(['sysConfigData']),
/**** 【取当前 active 的 slide 的 index】 ****/
activeIndex() {
return this.$refs && this.$refs.swiperRef && this.$refs.swiperRef.swiper.activeIndex
},
},
watch: {
},
created() {
},
methods: {
}
}
</script>
<style lang='scss' scoped>
.imgSwiper {
height: 100px;
display: flex;
justify-content: center;
margin: 20px;
::v-deep .swiper-wrapper {
width: 100%;
height: 100%;
.swiper-slide {
img,
.el-image {
width: 100%;
height: 100%;
}
}
.swiper-slide-active {
border: 2px solid #00a4ff;
}
.swiper-pagination {
bottom: 0;
}
.swiper-button-next,
.swiper-button-prev {
height: 20px;
top: 60%;
}
}
}
</style>
Swiper plug-in API documentation: https://www.swiper.com.cn/api/index.html
- The above code is for registering the swiper component locally, and it can also be registered globally
// 在 main.js 文件中（一定记得 css 文件也要引入，不然页面中使用轮播布局会乱 - 详见犯过的错3.2） import { swiper, swiperSlide } from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.component('Swiper', swiper) Vue.component('SwiperSlide', swiperSlide)
3. Mistakes made
3.1 When importing components on demand, the component name should correspond to the exported component name
- Error: no reason found
- [Reason for error reporting] Due to the habit of packaging components in naming big hump, when importing swiper-related components, it is written as big hump by default:
- Checked the code in the vue-awesome-swiper plug-in, and saw that when exporting the swiper component, the component name is named with a small hump,
- When importing the swiper component on demand, modify the component name to small hump and no error will be reported
3.2 The carousel style on the page is confusing
- expected result
- actual effect
- The effect of the page carousel image is incorrect [reason]
- The globally registered swiper component is used, but the css style file is not introduced in main.js