微信小程序:点击预览大图功能
点击预览大图功能
1、 给轮播图swiper-item绑定点击事件
2、 预览功能的本质是调用了小程序的api:previewImage

微信公众号----文档----开发----API----媒体----图片----wx.previewImage



输入wx-previewImage,删除后面三个参数。
先构造要预览的图片数组,数组中的值为pics数组中pics_mid,但是此时在handlePreviewImage方法中拿不到goodsObj,为了方便获取属性,我们可以设置一个全局对象,

然后在请求成功之后给goodsInfo赋值即可。

然后通过map方法获取数组中的特定属性重新组成的数组
点击事件触发,接收传递过来的图片url,通过自定义属性的方式传参。



微信小程序:点击预览大图功能的更多相关文章
- 微信小程序图片放大预览
需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码 ...
- 原创:跳坑指南——微信小程序真机预览跟本地不同的问题
微信小程序中出现最多的一个问题,就是真机跟本地不同:我简单列举一些我发现的原因,给大家参考,大家也可以把自己发现的东西回复给我,给我参考:本地看不到数据,就先让本地能看到数据,再看本帖.... 1:本 ...
- 微信小程序真机预览跟本地不同的问题。原文地址:https://blog.csdn.net/qq_27187991/article/details/69664247/
微信小程序中出现最多的一个问题,就是真机跟本地不同:我简单列举一些我发现的原因,给大家参考,大家也可以把自己发现的东西回复给我,给我参考: 本地看不到数据,就先让本地能看到数据,再看本帖....特别提 ...
- 【微信小程序】微信小程序wx.previewImage预览图片
一.小知识 二.例子,配合轮播图使用效果更佳!(如图1) 1.wxml <scroll-view scroll-y="true"> <swiper catchta ...
- 微信小程序:图片预览
wxml页面: <image src='{{UPLOAD_IMAGES_URL}}{{vv.img_s}}' data-src="{{vv.img}}" bindtap=&q ...
- 微信小程序点击图片放大预览
微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{ ...
- 微信小程序点击控制元素的显示与隐藏
微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view cla ...
- 微信小程序0.11.122100版本新功能解析
微信小程序0.11.122100版本新功能解析 新版本就不再吐槽了,整的自己跟个愤青似的.人老了,喷不动了,把机会留给年轻人吧.下午随着新版本开放,微信居然破天荒的开放了开发者论坛.我很是担心官方 ...
- 微信小程序点击保存图片到本地相册——踩坑
在微信小程序中要保存图片到本地相册,需要获取相册权限. 总之整个功能实现下来需要如下几个小程序的API:wx.getSetting,wx.authorize,wx.openSetting,wx.dow ...
随机推荐
- 常用的trigger表达式
1.Name:Incoming traffic on interface {#SNMPVALUE} is greater than 300Mb, now is {ITEM.VALUE} Express ...
- linux-Navicat连接linux远程数据
linux-Navicat连接linux远程数据 (一)登陆数据库 (二)创建用户用于远程连接 GRANT ALL PRIVILEGES ON *.* TO '账号'@'%' IDENTIFIED B ...
- 开发环境管理利器Vagrant
引言 不知道你是否经历过,开发环境与生产环境不一致.Windows开发和Linux上的包效果不一样.在我这运行时好的啊 等等等问题,那有没有解决方法呢? 答案就是Vagrant.Docker 1.简介 ...
- dedecms新建内容模型以及如何添加字段
dedecms新建内容模型以及如何添加字段 内容模型就是我们所说的频道模型,利用频道模型可以实现其使用他的栏目具备一些功能,比如说,图片模型,在使用他的栏目中就可以发表多个图片,并且能够达到相册的功能 ...
- 小白搭建WAMP详细教程---php安装与设置
一.php官网下载php压缩包 到php官网http://www.php.net 下载,有很多版本,我们这里选择7.2.25,具体步骤如下: 二.php的安装 下载后得到如下的压缩包,将压缩包解压到您 ...
- DICOM医学文件的解析
最近导师一直让做智慧医疗的一个项目,这里面涉及到DICOM格式的文件处理,在这里分享一下自己学到的关于DCM文件的一些内容. DICOM DICOM(DigitalImaging andCommuni ...
- Codeforces Round #649 (Div. 2) C. Ehab and Prefix MEXs
题目链接:https://codeforces.com/contest/1364/problem/C 题意 给出大小为 $n$ 的非递减数组 $a$,构造同样大小的数组 $b$,使得对于每个 $i$, ...
- 南阳ccpc C题 The Battle of Chibi && hdu5542 The Battle of Chibi (树状数组优化+dp)
题意: 给你一个长度为n的数组,你需要从中找一个长度为m的严格上升子序列 问你最多能找到多少个 题解: 我们先对原序列从小到大排序,排序之后的序列就是一个上升序列 这里如果两个数相等的话,那么因为题目 ...
- poj1821——Fence
题意: 一个栅栏一共有n(从1--n)个木板,我们找k个工人去粉刷它,li表示每个人有限制粉刷木板数量,pi表示粉刷一个木板得到的钱,si表示他开始在那个木板前面 如果一个工人要粉刷,那么他必须粉刷s ...
- Codeforces Round #680 (Div. 2, based on Moscow Team Olympiad) C. Division (数学)
题意:有两个数\(p\)和\(q\),找到一个最大的数\(x\),使得\(p\ mod\ x=0\)并且\(x\ mod\ q\ne 0\). 题解:首先,如果\(p\ mod\ q\ne0\),那么 ...