【微信小程序】--bindtap参数传递,配合wx.previewImage实现多张缩略图预览
本文为原创随笔,纯属个人理解。如有错误,欢迎指出。
如需转载请注明出处
在微信小程序中预览图片分为
a、预览本地相册中的图片。
b、预览某个wxml中的多张图片。
分析:实质其实是一样的。都是给wx.previewImage传入参数
wx.previewImage{
current:''.//打开预览时要显示图片的地址。
urls:[],//需要预览的图片的地址数组。
}
这里拿b、预览某个wxml中的图片列表来讲解bindtap的传值问题。a、预览本地相册。可以结合wx.chooseImage接口来实现,这里就不多说了。
直接上效果吧
上代码
// wxml中的关键代码 <view class="right imgs" >
<view class="img" wx:for="{{item.info_file}}" wx:for-item="img" wx:key="img" id="img" bindtap='previewImg' id="img" data-imgs='{{item.info_file}}' data-currentimg="{{img}}">
<image src="{{server_host}}{{img}}"></image>
</view>
</view>
// 对应js中bindtap函数的代码 previewImg: function (event) {
var that =this;
console.log(event);
var imgs= event.currentTarget.dataset.imgs;
var temp=[];
for (var index in imgs){
temp = temp.concat(app.globalData.SERVER_HOST+imgs[index]);
}
wx.previewImage({
current: app.globalData.SERVER_HOST+event.currentTarget.dataset.currentimg,
urls: temp,
})
}
关键解释:
- bindtap传值方式:通过data-*的方式传递参数。然后从相应函数的参数event中获取对应的值。此处使用data-imgs传递将要预览的图片的地址数组。则在相应函数中则通过event.currentTarget.dataset.imgs即可获得相应的值。同理data-currentimg。则是通过event.currentTarget.dataset.currentimg获取传入的值。
【微信小程序】--bindtap参数传递,配合wx.previewImage实现多张缩略图预览的更多相关文章
- 微信小程序-上传多张图片加进度条(支持预览、删除)
2018-12-24 详情示例见:https://www.cnblogs.com/cisum/p/9564898.html 2018-12-29 组件下载见:https://www.cnblogs.c ...
- 微信小程序数据请求方法wx.request小测试
微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...
- 微信小程序wepy开发循环wx:for需要注意
微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...
- 微信小程序-用户拒绝授权使用 wx.openSetting({}) 重新调起授权用户信息
场景模拟:用户进入微信小程序-程序调出授权 选择拒绝之后,需要用到用户授权才能正常使用的页面,就无法正常使用了. 解决方法:在用户选择拒绝之后,弹窗提示用户 拒绝授权之后无法使用,让用户重新授权(微信 ...
- 微信小程序如何在使用wx.request使用cookie
我主要是做asp.net mvc后端开发的,经常使用Jquery的ajax与后台的Web API进行数据交互. 最近公司要做一个小程序,要实现小程序与Web前端的通信,当然小程序是可以实现socket ...
- 微信小程序的坑之wx.miniProgram.postMessage
工作中有个需求是小程序的网页在关闭的时候,需要回传给小程序一个参数 查阅小程序官方文档,有这样一个接口 wx.miniProgram.postMessage ,可以用来从网页向小程序发送消息,然后通过 ...
- 微信小程序组件——详解wx:if elif else的用法
背景 在学习微信小程序开发wxml页面时,需要使用if,else来判断组件是否进行展示,代码如下 <view wx:if="{{is_login==1}}">成功登录& ...
- 微信小程序踩坑之一[wx.request]请求模式
最近在做小程序时,使用wx.request()方法请求时, 当使传输string类型时,一定要声明method请求模式为post,否则会一直报错,而不声明时默认为get, 已填坑 =,= wx.req ...
- 微信小程序节点查询方法:wx.createSelectorQuery()的使用场景与注意事项
小程序由于内置于微信,这使得它有了得天独厚的宣传和使用优势,本着学习的心态,我在官网上看了一遍开发文档,大致得出小程序框架的设计模式与使用注意事项(重点来了,其实开发文档某些方面叙述的并不仔细,甚至存 ...
随机推荐
- 「NOIP模拟赛」Round 2
Tag 递推,状压DP,最短路 A. 篮球比赛1 题面 \(Milky\ Way\)的代码 #include <cstdio> const int N = 2000, xzy = 1e9 ...
- C#上机实验(三)
源码如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespac ...
- IDA报错fatal error before kernel init
编写了一个IDA64插件,结果再打开IDA后报错fatal error before kernel init,然后闪退. 检查了一遍代码没发现有问题,后来发现是环境有一处配置错误, IDA64.exe ...
- c++ 反汇编 继承
单继承,父类中没有虚函数 单继承,父类存在虚函数,子类重写虚函数 单继承,父类存在虚函数,子类不新定义虚函数 单继承,父类存在虚函数,子类新定义虚函数 单继承,父类不存在虚函数,子类定义虚函数 多继承 ...
- 攻防世界 reverse 进阶5-7
5.re-for-50-plz-50 tu-ctf-2016 流程很简单,异或比较 1 x=list('cbtcqLUBChERV[[Nh@_X^D]X_YPV[CJ') 2 y=0x37 3 z= ...
- python3 list合并
1 t1=[x for x in range(5)] 2 t2=[x for x in range(5,10)] 3 4 #way1:通过方法extend(),直接修改列表,无返回值 5 # t1.e ...
- Android学习之探究Fragment
•碎片是什么 Fragment是一种可以嵌入在活动中的UI片段,能够让程序更加合理和充分地利用大屏幕的空间: 出现的初衷是为了适应大屏幕的平板电脑,可以将其看成一个小型Activity,又称作Acti ...
- 懵了!女朋友突然问我MVCC实现原理
前言 都知道事务的可重复读级别实现原理是使用MVCC实现的,那么你对MVCC的底层实现原理知道多少呢?面试高频点,你值得拥有. 一.MVCC到底是什么? MVCC即多版本控制器,其特点就是在同一时间, ...
- Rancher 安装和使用-实践
Rancher 安装和使用 Rancher是一个完整的,开源的平台,用于在生产环境中部署和管理容器.它包括Kubernetes,Mesos和Docker Swarm的商业支持发行版,使得在任何基础架构 ...
- upload-labs通关历程
使用靶场前,先配置php版本为5.2,和下列对应配置. php.ini magic_quotes_gpc Off php<5.3.4 httpd.conf AddType applicatio ...