vue使用siwper走马灯

效果

1：在单独文件中使用

  <!-- Top --><swiper ref="mySwiper" :options="swiperOption" class="gallery-top"><swiper-slide class="swiper-slide1" v-for="(item, index) in ListPic" :key="index"><div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 450px"><img style="max-width: 100%; max-height: 100%" :src="item" /></div></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><!-- Bottom --><swiper ref="mySwiper2" :options="swiperOption2" class="gallery-thumbs"><swiper-slide class="swiper-slide2" v-for="(item, index) in ListPic" :key="index"><el-image style="width: 50px; height: 50px" :src="item" fit="cover"></el-image></swiper-slide></swiper>

   //走马灯//topswiperOption: {//显示分页pagination: {el: '.swiper-pagination',clickable: true,watchSlidesVisibility: true, //避免出现bug具体干啥咱也不清楚只能跟着写上去},//设置点击箭头navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',hideOnClick: true,},//开启循环模式// loop: true, //自动循环//speed: 5000, //自动播放 一秒滑动一次},//bottomswiperOption2: {spaceBetween: 10,centeredSlides: true, //true 为居中slideToClickedSlide: true,slidesPerView: 'auto',touchRatio: 0.2,},

放在点击事件里面调用加载图片的时候调用

this.$nextTick(() => {const mySwiper = this.$refs.mySwiper.$swiper; //topconst mySwiper2 = this.$refs.mySwiper2.$swiper;mySwiper.controller.control = mySwiper2;mySwiper2.controller.control = mySwiper;});

样式

/* 走马灯 */
.swiper-slide2 {margin: 15px 0 0 0;
}
.swiper-slide2:hover {cursor: pointer;
}
.swiper-slide {background-size: cover;background-position: center;
}
.gallery-top {height: 80% !important;width: 100%;
}
.gallery-thumbs {height: 20% !important;box-sizing: border-box;padding: 10px 0;
}
.gallery-thumbs .swiper-slide {width: 7%;height: 100%;opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {opacity: 1;
}

2：放在组件中使用

Swiper.vue

<template><div><div @click="show = true"><slot></slot></div><el-dialog title="查看图片" :visible.sync="show" width="700px" :close-on-click-modal="false"><!-- Top --><swiper ref="mySwiper" :options="swiperOption" class="gallery-top"><swiper-slide class="swiper-slide1" v-for="(item, index) in list" :key="index"><div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 450px"><img style="max-width: 100%; max-height: 100%" :src="item" /></div></swiper-slide><div class="swiper-button-prev" slot="button-prev"></div><div class="swiper-button-next" slot="button-next"></div></swiper><!-- Bottom 分页器--><swiper ref="mySwiper2" :options="swiperOption2" class="gallery-thumbs"><swiper-slide class="swiper-slide2" v-for="(item, index) in list" :key="index"><el-image style="width: 50px; height: 50px" :src="item" fit="cover"></el-image></swiper-slide></swiper></el-dialog></div>
</template>
<script>
export default {name: 'Preview',props: {list: {type: Array,defalut: () => [],},},data() {return {show: false,//topswiperOption: {//显示分页pagination: {el: '.swiper-pagination',clickable: true,watchSlidesVisibility: true, //避免出现bug具体干啥咱也不清楚只能跟着写上去},//设置点击箭头navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',hideOnClick: true,},//开启循环模式// loop: true, //自动循环//speed: 5000, //自动播放 一秒滑动一次},//bottomswiperOption2: {spaceBetween: 10,centeredSlides: true, //true 为居中slideToClickedSlide: true,slidesPerView: 'auto',touchRatio: 0.2,},};},watch: { //很重要！！！这里仔细看吧 你会明白的show(value) {if (value) {this.$nextTick(() => {const mySwiper = this.$refs.mySwiper.$swiper; //topconst mySwiper2 = this.$refs.mySwiper2.$swiper;console.log(mySwiper);console.log(mySwiper2);mySwiper.controller.control = mySwiper2;mySwiper2.controller.control = mySwiper;});}},},methods: {},mounted() {// console.log(this.show);// if (this.show) {//   this.$nextTick(() => {//     const mySwiper = this.$refs.mySwiper.$swiper; //top//     const mySwiper2 = this.$refs.mySwiper2.$swiper;//     console.log(mySwiper);//     console.log(mySwiper2);//     mySwiper.controller.control = mySwiper2;//     mySwiper2.controller.control = mySwiper;//   });// }},
};
</script><style lang="scss" scoped>
/* 走马灯 */
.swiper-slide2 {margin: 15px 0 0 0;
}
.swiper-slide2:hover {cursor: pointer;
}
.swiper-slide {background-size: cover;background-position: center;
}
.gallery-top {height: 80% !important;width: 100%;
}
.gallery-thumbs {height: 20% !important;box-sizing: border-box;padding: 10px 0;
}
.gallery-thumbs .swiper-slide {width: 7%;height: 100%;opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {opacity: 1;
}
</style>

使用

//HTML
<ux-table-column title="图片" field="pic" width="150" align="center"><template scope="scope"><!-- photoList 是数组 --><preview :list="scope.row.photoList"><el-button type="primary" size="mini" :disabled="!scope.row.pic && !scope.row.attachedPic">查看</el-button></preview></template>
</ux-table-column>
//js
import Preview from '@/components/Swiper/Swiper';
export default{components: {Preview,},
}

vue使用siwper走马灯相关推荐

vue element-ui 中走马灯自适应图片高度
图片自适应废话不多说先上完整的代码 <template><div>{{img_height | add_px}}<el-carousel indicator-posit ...
element走马灯自动_[转]vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
vue css实现走马灯(轮播)组件，websocket推送数据
需求背景:数据统计常需要实现内容定向移动的走马灯效果,便于用户实时观察数据变动. 目标:实现一个vue组件,可以上下左右实现走马灯效果,且走马灯元素可自定义. 技术选型比较常用的方式是如下几种 j ...
Vue ElementUI el-carousel 走马灯指示灯样式修改
Carousel 走马灯一.原始样式二.修改后三.代码 <template><div><el-carousel height="250px" & ...
vue element ui 走马灯轮播图（简单几句话实现自动缩放效果）
实现效果 element ui 简单实现轮播图本文,中间叙述的是过程,完整代码在最后面. 最近在写公司官网,用的是element ui 走马灯组件写的轮播图,ui想要自动缩放的效果,如上视频.在这里 ...
vue uniapp 实现走马灯，文字横向滚动
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>vue ...
vue+element之carousel走马灯的使用（The use of vue+element carousel）
2022.10.13 大家好,今天我使用了vue+element实现走马灯的效果,类似于轮播图,可以进行一个图片的滑动. Hello, everyone. Today, I used vue+elem ...
element 日期选择图标_element-ui日期组件DatePicker设置日期选择范围Picker Options
element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...
vue积累——另一种走马灯
效果图: vue源码: <template><el-carousel :interval="1500" type="card" height= ...

vue使用siwper走马灯

1：在单独文件中使用

2：放在组件中使用

vue使用siwper走马灯相关推荐

最新文章

热门文章