商品详情轮播图预览效果

为轮播图中的 image 图片绑定 click 事件处理函数：

 <swiper-item class="photo-box" v-for="(item,i) in shopDetail.data_photo.shop_photo" :key="i"><!-- 把当前点击的图片的索引，传递到 preview() 处理函数中 --><image class="shop-iamge" :src="item.shop_big_logo"  @click="preview(i)"></image></swiper-item>

在 methods 中定义 preview 事件处理函数：

 // 实现轮播图的预览效果preview(i) {// 调用 uni.previewImage() 方法预览图片uni.previewImage({// 预览时，默认显示图片的索引current: i,// 所有图片 url 地址的数组urls: this.goods_info.pics.map(x => x.pics_big)})}

所引用的数据结构：

mock.js

 "data_photo": {"shop_id": 1,"shop_title": "商家相册","shop_photo":[{"photo_name":"环境","shop_big_logo": "图片.jpg","shop_small_logo": "图片.jpg",},{"photo_name":"师资","shop_big_logo": "图片.jpg","shop_small_logo": "图片.jpg",},{"photo_name":"学员案例","shop_big_logo": "图片.jpg","shop_small_logo": "图片.jpg",},]},

简单的swiper实现照片预览功能相关推荐

webcam html5+PHP 实现网站调用摄像头拍照，存储照片和照片预览功能
1HTML <div><div id="camera" style="float: left"></div><div ...
JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
最简单的图片预览功能【兼容IE8】
最简单的图片预览功能[兼容IE8] 将如下代码放入<head></head>中: <html><head> <script type=&quo ...
java批量上传图片_JAVA图片批量上传JS-带预览功能
这篇文章就简单的介绍一个很好用的文件上传工具,批量带预览功能.直接贴代码吧,都有注释,很好理解. HTML页面 pageEncoding="UTF-8"%> 新增照片 var ...
Mac 预览怎么用 Mac预览功能实用技巧大全
Mac预览怎么用?有很多的用户以为Mac自带的预览功能只具有简单的图片浏览功能,其实不然,其实"预览"是一款强大的看图.修图.改图软件,也同时是一款多功能的 PDF 阅读与编辑工具 ...
使用Camera2实现预览功能
前言首先需要知道的是该博客只是简单的将摄像头打开并进行预览的一个操作,对于横屏竖屏切换的一个判断处理并没有实现,后续会进行完善,但是不会在这个博客中进行说明. 其次在编写之前应该对整个预览过程用到的 ...
vue+vant使用图片预览功能ImagePreview的问题
如果您搜到这篇文章的话,那员外估计您遇到跟我一样的问题了,即在打开图片预览功能后,如果不关闭预览的图片,同时改变路由的话,会发现即使路由改变了,预览的图片还在文档的最顶层显示,如图: 着实让员外百思不 ...
uniapp实现图片预览功能
点击图片实现预览功能如下:  <view class="ms_shops"><swiper class="ms_swi ...

简单的swiper实现照片预览功能

商品详情轮播图预览效果

为轮播图中的 image 图片绑定 click 事件处理函数：

在 methods 中定义 preview 事件处理函数：

所引用的数据结构：

简单的swiper实现照片预览功能相关推荐

最新文章

热门文章