微信小程序实现图片预览功能
更新时间：2018年01月31日 16:47:56 作者：Rattenking
这篇文章主要为大家详细介绍了微信小程序实现图片预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文为大家分享了微信小程序实现图片预览的具体代码，供大家参考，具体内容如下
效果图
原理
- 使用wx.chooseImage选择本地图片；
- 使用wx.previewImage预览图片。
WXML
<view>
<button bindtap="previewImage" type="primary">图片上传预览</button>
<view class="tui-content">
<image class="tui-preview-img" wx:for="{{previewImageArr}}" bindtap="changePreview" data-src="{{item}}" src="{{item}}"></image>
</view>
</view>
WXSS
page{background-color: #efeff4;}
.tui-preview-img{
width: 200rpx;
height: 120rpx;
}
JS
Page({
data: {
previewImageArr:[]
},
previewImage(e){
var self = this;
wx.chooseImage({
count:8,
success(res) {
var tempFilePaths = res.tempFilePaths;
self.setData({ previewImageArr: tempFilePaths});
}
})
},
changePreview(e){
var self = this;
wx.previewImage({
current: e.currentTarget.dataset.src,
urls: self.data.previewImageArr
})
}
})
注意
wx.previewImage的参数current和urls必须是http链接。
DEMO下载
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Bootstrap Tree View简单而优雅的树结构组件实例解析
本文通过实例代码给大家介绍了Bootstrap Tree View简单而优雅的树结构组件,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-06-06
使用Modello编写JavaScript类...2006-12-12
javascript中for...of和for..in循环的区别
JS中循环语句众多，你是否也有用的时候突然不知道用哪个的经历，本文主要介绍了javascript中for...of和for..in循环的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
本文主要介绍了微信小程序骨架屏的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
最常做的事情就是注册事件处理程序，因为在ExtJS的世界里，几乎完全由时间组成，下面是处理程序案例，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-05-05
事件对于控件来说至关重要，控件的消息通信机制使用事件的成本最低，但是对于JS控件来说有一些麻烦需要解决，JS类本身不支持事件，DOM模型支持的事件仅适应于浏览器的DOM节点。所以创建一套事件是我们写控件之前要做的2012-10-10
今天小编就为大家分享一篇layer更改皮肤的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
Bootstrap框架结合jQuery仿百度换肤功能实例解析
这篇文章主要为大家详细介绍了Bootstrap框架结合jQuery仿百度换肤功能实现代码解析,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
有关this想必大家早有所耳闻，只不过在使用中不是那么在意而已，接下来为大家介绍下this做事件参数问题，感兴趣的你可不要错过了哈2013-03-03
tabBar相对而言用的还是比较多的,但是用起来并没有难,下面这篇文章主要给大家介绍了关于微信小程序全局配置之tabBar的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
最新评论