vue使用swiper实现左右滑动切换图片
180 浏览量
2021-01-18
17:20:17
上传
评论
收藏 89KB PDF 举报
vue使用使用swiper实现左右滑动切换图片实现左右滑动切换图片
本文实例为大家分享了vue使用swiper实现左右滑动切换图片的具体代码，供大家参考，具体内容如下
使用npm 安装vue-awesome-swiper
npm install vue-awesome-swiper --save
在main.js中引用
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.user(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'
在组件中使用
<template>
<div>
<label class="timeline">{{ time }}</label>
<div id="star-pic-vue">
<template v-if="data">
<img
e
v-for="(item, index) in images"
:src="item.url"
:key="index"
id="contract_url"
@click="enlargePic(index)"
/>
<template v-if="isDialogShow"> </template>
<el-dialog
:visible.sync="centerDialogVisible"
width="100%"
modal
close-on-click-modal
custom-class="dialog"
>
<swiper :options="swiperOption" ref="mySwiper" style="height: 100%;">
<swiper-slide v-for="(img, index) in images" :key="index">
<div class="swiper-zoom-container">
<img :src="img.url" alt="" />
</div>
</swiper-slide>
</swiper>
</el-dialog>
</template>
</div>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
name: "PictureComponent",
props: ["data", "maxShow", "time"],
data() {
return {
centerDialogVisible: false,
showPic: "",
isDialogShow: false,
activeIndex: 1,
startX: 0,
swiperOption: {
width: window.innerWidth,
zoom: true,
initialSlide: 0
}
};
},
computed: {
images() {
if (this.data instanceof Array && this.data.length > 2) {
资源评论
