微信小程序点击图片放大

wx.previewImage

官方文档的解释

PS：红色框框内要注意，需要预览的图片连接列表只支持网络连接图片，2.2.3版本以上支持云文件ID。

将图片dream.jpg上传到云储存：

得到File ID：
cloud://cloud1-7gpjmj1d017d7aae.636c-cloud1-7gpjmj1d017d7aae-1308864860/example/dream.jpg

直接上代码：

bigimage.wxml：

<image class='img' src='{{imgUrl}}' bindtap='previewImage'mode="widthFix"></image>

img.js：

Page({data: {imgUrl: 'cloud://cloud1-7gpjmj1d017d7aae.636c-cloud1-7gpjmj1d017d7aae-1308864860/example/dream.jpg',},previewImage: function (e) {var imgUrl = this.data.imgUrl;wx.previewImage({urls: [imgUrl], // 需要预览的图片http链接列表current: '', // 当前显示图片的http链接})},onLoad: function (options) {},onReady: function () {},onShow: function () {},onHide: function () {},onUnload: function () {},onPullDownRefresh: function () {},onReachBottom: function () {},onShareAppMessage: function () {}
})

bigimage.wxss这里就不上了

上效果图

点击图片预览效果：

总结：

需要预览的图片连接列表只支持网络连接图片，2.2.3版本以上支持云文件 ID。

初学者笔记——微信小程序点击图片放大相关推荐

微信小程序点击图片放大预览，新页面中全屏预览图片
第一步:在wxml中定义image组件,并设置绑定事件. <image src="{{priceUrl}}" bindtap="imgClick"> ...
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 先上效果图,再附上完整源码: 1.多张图片循环渲染后预览.保存.识别带参数二维码 <view w ...
微信小程序点击图片，可全屏预览图片，长按可保存可转发朋友
微信小程序官方方法:官方提供的 previewImage 方法,可点击顶部的官方链接查看直接上代码页面是一个轮播图(根据自己情况即可) 数据是服务端返的,存放在data中注意:构造要预览的图片 ...
微信小程序点击图片保存到相册
小程序实现点击图片保存到相册温馨提示:小程序图片在本地保存成功后放到线上失效,应该是没有设置合法的文件下载域名 // 下载事件函数bindImage: function (e) {var url = ...
微信小程序点击图片预览真机无法显示的问题
问题: 用开发者工具开发编辑时,点击图片预览,一直显示黑屏加载转圈中- 如图所示: 实际效果图: 话不多说,直接上代码 1.html代码: <view class="img-box&q ...
微信小程序点击图片切换图片
实现的效果图实现的方式有2中先说下思路 1 使用wx:if 写2个图片点击的显示一张即可, 2 使用数据传递当拿到图片的时候更换图片即可. 看下代码 2中方式:xml <view clas ...
小程序点击图片放大预览
Banner图点击预览 wxml  <view class='home-banner'><swiper indicator-dots='tr ...
微信小程序点击放大图片
微信小程序点击放大图片在做微信小程序的时候遇到了这个点击放大的事件,这里记录一下 checkmap:function(e){var imageurl=this.data.mapimagesrc;co ...
微信图片自动上传到服务器,微信小程序怎样使图片上传至服务器
这次给大家带来微信小程序怎样使图片上传至服务器,微信小程序使图片上传至服务器的注意事项有哪些,下面就是实战案例,一起来看一下.-wxml 发布项目 /**选择图片 */ choose: functio ...

初学者笔记——微信小程序点击图片放大

微信小程序点击图片放大

官方文档的解释

PS：红色框框内要注意，需要预览的图片连接列表只支持网络连接图片，2.2.3版本以上支持云文件ID。

将图片dream.jpg上传到云储存：

直接上代码：

bigimage.wxml：

img.js：

bigimage.wxss这里就不上了

上效果图

点击图片预览效果：

总结：

需要预览的图片连接列表只支持网络连接图片，2.2.3版本以上支持云文件 ID。

初学者笔记——微信小程序点击图片放大相关推荐

最新文章

热门文章