小程序预览轮播图 大图
在很多的地方需要这一功能，比如淘宝点击商品的轮播图或会放大这一张图片到全屏。
这具体怎么实现呢？
首先对轮播图绑定一个单击事件，并且给其一个参数，也就是当前图片的url值
代码如下：
<view class="detail_swiper"><swiper autoplay circular indicator-dots interval="2000"><!--给轮播图的子选项绑定事件。--><swiper-item wx:for="{{goodsObj.pics}}" wx:key="pics_id" data-url="{{item.pics_mid}}" bindtap="handlePrevewImage"><image src="{{item.pics_mid}}" mode="widthFix" /></swiper-item></swiper>
</view>
随后在对应的js文件当中对参数及事件进行接收：
先对这个appdata当中的全局变量进行map构造，随后接收从wxml当中传回来的url这个参数，最后使用wx.previewImage进行赋值。这里的urls进行map后就是对所有轮播图的图片的url进行构造成一个数组。
handlePrevewImage(e) {console.log(e)const urls = this.GoodsInfo.pics.map(v => v.pics_mid);//接收传参的urls中的值indexconst current = e.currentTarget.dataset.url;console.log(current)wx.previewImage({current,urls});},
最后看一下效果图：先将图片移动到最后一张，单击图片预览。
小程序预览轮播图 大图相关推荐
- 微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度的方法...
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- php实现轮播图代码,微信小程序实例：轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
- 微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- 微信小程序：swiper轮播图添加外层圆角
微信小程序:swiper轮播图添加外层圆角 .swiper-wrap{overflow: hidden;border-radius: 8rpx;box-sizing: border-box;width ...
- jQuery和CSS3商品图片预览轮播图插件
这是一款非常实用的 jQuery和 CSS3创意商品图片预览 轮播图插件.该轮播图插件以每个商品作为一个轮播图,用户可以在每个商品缩略图中查看该商品的颜色和款式.一般的商务网站都是通过图片来吸引用户, ...
- 微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法 小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
- 微信小程序自定义swiper轮播图面板指示点|小圆点|进度条
描述: 在工作中开发一个页面,多少都会用到轮播图,但是由于微信官方提供的轮播图swiper组件局限性太大了,所以接下来我会教大家怎么去自定义轮播图的进度条. 简单修改: 如果你的项目只是简单的修改小圆 ...
- 微信小程序实现3D轮播图
在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现 效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重 ...
- 微信小程序开发 | 02 - 轮播图实现（swiper组件）
一.实现思路 轮播图基于微信小程序提供的swiper组件(文档)实现. swiper组件中使用到下列属性: display-multiple-items:同时显示的滑块数量 current:当前所在滑 ...
最新文章
- 2021年中国工业互联网安全大赛核能行业赛道writeup之usb流量分析
- 使用PHP自带zlib函数 几行代码实现PHP文件打包下载zip
- 文献记录(part66)--一种基于交叉熵的社区发现算法
- 10-5 5-5 查询只卖三种不同型号PC的厂商 (20 分)
- C++ 为什么要用覆盖（学习笔记）
- PHP表单提交后页面跳转,PHP在表单提交后重定向到另一个页面
- EasyUI：combobox设置不可编辑更改
- Eclipse在当前行之上插入一行
- RTP、RTCP及媒体流同步
- InnoDB存储引擎介绍-(1)InnoDB存储引擎结构
- Linux 系统查看网卡配置信息
- 2023郑州大学计算机考研信息汇总
- android+百度阅读,百度阅读最新版
- matlab软件moran值,MATLAB 的moran，LM值
- CHECK约束在表继承中的使用
- 一条语句查询出所有雇员的编号、姓名、性别、出生日期、电话号码部门名称和本月收入
- 哈夫曼树与哈夫曼编码及等长编码
- startactivity后App出现闪退问题情况分析
- SpringCloud（完结）
- 数学分形之谢尔宾三角形