vue使用swiper實現(xiàn)左右滑動切換圖片
本文實例為大家分享了vue使用swiper實現(xiàn)左右滑動切換圖片的具體代碼,供大家參考,具體內(nèi)容如下
使用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) { 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節(jié)點, // 返回來的只能是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 h3 { 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這些語句如果依賴父組件傳來的參數(shù)的話,該參數(shù)是在mounted()階段子還沒獲取得到。
如果想要真正地在DOM加載完成后拿到數(shù)據(jù),就需要調(diào)用VUE的全局api : this.$nextTick(() => {})
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue+vuex+koa2開發(fā)環(huán)境搭建及示例開發(fā)
本篇文章主要介紹了詳解vue + vuex + koa2開發(fā)環(huán)境搭建及示例開發(fā),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01vue中的事件修飾符once,prevent,stop,capture,self,passive
這篇文章主要介紹了vue中的事件修飾符once,prevent,stop,capture,self,passive,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vuex state及mapState的基礎(chǔ)用法詳解
這篇文章主要介紹了vuex state及mapState的基礎(chǔ)用法詳解,本文通過實例代碼相結(jié)合的形式給大家介紹的非常詳細,需要的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04vue 解決provide和inject響應(yīng)的問題
這篇文章主要介紹了vue 解決provide和inject響應(yīng)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11Vue使用xlsx和xlsx-style導(dǎo)出表格出現(xiàn)部分樣式缺失的問題解決
這篇文章主要為大家詳細介紹一下Vue使用xlsx-style導(dǎo)出excel時樣式的設(shè)置,以及出現(xiàn)添加背景色,合并單元格部分樣式缺失問題的解決,需要的可以參考下2024-01-01vue2中使用echarts實現(xiàn)中國地圖、在中國地圖上標注坐標散點圖的操作代碼
這篇文章主要介紹了vue2中使用echarts實現(xiàn)中國地圖、在中國地圖上標注坐標散點圖,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2024-05-05