微信小程序开发之图片预览
实现图片的展示和大图预览
使用wx.previewImage(OBJECT)来实现
OBJECT参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
current | String | 否 | 当前显示图片的链接,不填则默认为 urls 的第一张 |
urls | StringArray | 是 | 需要预览的图片链接列表 |
success | Function | 否 | 接口调用成功的回调函数 |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码:
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
})
地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxpreviewimageobject
实例代码
wxml
<view class="weui-uploader">
<view class="weui-uploader__hd">
<view class="weui-uploader__title">图片列表</view>
</view>
<view class="weui-uploader__bd">
<view class="weui-uploader__files" id="uploaderFiles">
<block wx:for="{{Images}}">
<image bindtap="clickImage" style="width: 200px; height: 200px;" src="{{serverAddress}}{{item.ImagePath}}" mode="aspectFill" />
</block>
</view>
</view>
</view>
js
clickImage: function (e) {
var current = e.target.dataset.src
wx.previewImage({
current: current,
urls: ImageLinkArray,//内部的地址为绝对路径
fail: function() {
console.log('fail')
},
complete: function () {
console.info("点击图片了");
},
})
},
欢迎阅读本系列文章:微信小程序开发教程目录
微信小程序开发之图片预览的更多相关文章
- 微信小程序——网盘图片预览
微信小程序图片预览提供了一个wx.previewImage接口,如下图: 现在我需要对网盘文件里的图片预览,但是网盘从后台返回的数据是各种类型的文件,如下图所示: 那么我们需要解决2个问题: 1.从这 ...
- 微信小程序点击图片预览-wx.previewImage
<view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='im ...
- 微信小程序-点击图片预览
拿接口 有封装 封装查看另外的博文 点击动作 WXHTML 注意 data-xxxx自定义属性 这样知道我点的是哪个参数
- 微信小程序:点击预览图片
在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view c ...
- 微信小程序(组件demo)以及预览方法:(小程序交流群:604788754)
1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 Ap ...
- 微信小程序:点击预览大图功能
点击预览大图功能 1. 给轮播图swiper-item绑定点击事件 2. 预览功能的本质是调用了小程序的api:previewImage 微信公众号----文档----开发----API----媒体- ...
- 小程序 canvas实现图片预览,图片保存
wxml 代码: <view class="result-page"> <canvas bindtap="previewImage" canv ...
- 解决微信小程序wepy真机预览跟本地表现不一样,数据变化了视图没变化
当时搜了很多相关问题都没找到相似的 只看到有这个相似的描述wepy在onLoad里修改data-object的值页面不渲染 ,通过setData解决的. 但是这个还不是根本的解决办法,有些地方用set ...
- 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...
随机推荐
- Linux 编程--三种常用的定时器
这节我们来探讨一下linux开发过程中常用的定时器,尤其在网络编程中被常常用到如heartbeat,断线重连等等.这里提供了三种定时器的方案,分别是链表形式的计时器,环型计时器,最小堆计时器.每个都有 ...
- 伸缩的菜单,用toggle()重写
<!DOCTYPE ><html><head><meta charset="UTF-8"/><title>伸缩的菜单,用 ...
- beautifulSoup模块
这个库用来对网页进行解析功能,十分强大,有了它我们可以减少对正则的使用,也能顺利的从网页源码中拿到我们要的值.他是一个灵活,方便的网页解析库,处理高效,支持多种解析器. 这个库把HTML源码解析成对象 ...
- 简单了解Markdown
在Github的readme.md文件的编辑中,開始渐渐的接触Markdown.如今简单系统叙述一下Markdown的语法. Markdown是一种能够使用普通文本编辑器编写的标记语言.通过类似HTM ...
- COCOS学习笔记--关于使用cocostudio打安卓包
我在之前的博客里也写到过,如今cocos引擎提供了一键打包.很方便. 今天正好做个測试,想用引擎的一键打包弄个apk的安卓包.以下就简介一下详细过程和自己的一些理解: 先说一下项目背景,因为我的电脑是 ...
- 《Javascript_Dom 编程艺术》(第2版)读书笔记
第1章 Javascript 简史 Dom : 平稳退化.渐进增强,以用户为中心的设计 第2章 Javascript 语法 1.程序设计语言分为:解释性(javascript)和编译型(java,C+ ...
- Matlab 2014b For Mac安装破解
1.Matlab 2014b 的安装和破解文件下载: 安装文件:http://www.cncrk.com/downinfo/80718.html 破解文件:http://pan.baidu.com/s ...
- css实现垂直水平居中的5种方法
css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...
- 什么是Dubbo
1. Dubbo是什么? Dubbo是: 一款分布式服务框架 高性能和透明化的RPC远程服务调用方案 SOA服务治理方案 每天为2千多个服务提供大于30亿次访问量支持,并被广泛应用于阿里巴巴集团的各成 ...
- 【python】函数返回值