没有合适的资源?快使用搜索试试~ 我知道了~
本文实例为大家分享了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>{{ tim
资源推荐
资源详情
资源评论


















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) {
资源评论


weixin_38743076
- 粉丝: 7
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 大数据时代发展背景下会展企业的精细化管理.docx
- 微型计算机系统的组成部件.ppt
- 通信工程项目的网络优化方式分析.docx
- 在通信工程监理项目中如何降低投入成本.docx
- 20100609面向对象程序设计基础-A.doc
- 数据库运维方案.docx
- 对互联网教育市场去同质化方法的探究.docx
- EMS6010型路灯管理软件设计详细技术规范.doc
- 基于JSP的学生学籍管理系统方案设计书与开发.doc
- 第三单元构建无线局域网络.doc
- 通信电源设备安装工程定额.doc
- PLC在热处理电阻炉温度控制系统设计中的应用.doc
- 新媒体环境下民办高校学生就业信息网络建设研究.docx
- 不同品牌主板电脑BIOS启动热键制作U盘安装win7系统.doc
- 移动通信信息技术应用及其发展.docx
- LCD等液晶接口设计方案.doc
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈



安全验证
文档复制为VIP权益,开通VIP直接复制
