溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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" >
<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) {
var value = this.data;
return value.splice(0, this.maxShow);
} else {
return this.data;
}
}
},
components: {
swiper,
swiperSlide
},
methods: {
// 放大圖片
enlargePic(i) {
this.activeIndex = i;
this.isDialogShow = true;
// 使用$refs，如果ref是定位在有v-if、v-for、v-show中的DOM節點，
// 返回來的只能是undefined，因為在mounted階段他們根本不存在
this.$nextTick(() => {
var swiper = this.$refs.mySwiper.swiper;
swiper.activeIndex = i;
});
this.centerDialogVisible = true;
}
}
};
</script>
<style lang="scss">
.timeline {
display: block;
margin: 10px 20px 5px;
}
#star-pic-vue .el-dialog__wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
margin: 0;
background: #171717;
}
#star-pic-vue {
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
justify-content: stretch;
padding: 3px 13px;
img {
width: 82px;
height: 80px;
margin: 4px 0px 0px;
padding-right: 2px;
}
.dialog {
img {
width: 100%;
height: 100%;
margin: 0;
}
}
.el-carousel__item h4 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
height: 100%;
width: 100%;
}
.el-dialog__header {
display: none;
}
.el-dialog__body {
padding: 0 !important;
margin: 0 !important;
height: 460px;
background: #171717;
}
.el-carousel {
height: 100%;
}
.el-carousel__container {
height: 410px;
}
.el-carousel__indicators--outside {
margin-top: 20px;
}
}
</style>效果
$refs定位不到的主要原因是因為v-if、v-for、v-show這些語句如果依賴父組件傳來的參數的話，該該參數是在mounted()階段子還沒獲取得到~~~~！！！！
如果想要真正地在DOM加載完成后拿到數據，就需要調用VUE的全局api ： this.$nextTick(() => {})
看完上述內容，你們掌握vue利用swiper如何實現左右滑動切換圖片的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
