微信小程序----图片预览
2023-09-14 09:01:37 时间
效果体验二维码
如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!
效果图
原理
- 使用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链接。
WXRUI体验二维码
如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢!
其他
相关文章
- WordPress 网站开发“微信小程序“实战(三)
- 微信小程序wx.login()获取openid,附:前端+后端代码
- 一行代码让微信小程序支持 cookie
- 微信小程序_(组件)canvas画布
- 手机浏览器直接唤起微信方案调研
- 微信小程序:在开发测试时使用非业务域名(微信: 8.0.32)
- uni-app:微信小程序:保存图片到相册(hbuilderx 3.7.3)
- 微信小程序----原生API实现【到这里去(目的地)】路线规划
- 微信小程序----导航栏选项卡(MUI顶部选项卡)
- 微信公众号发送视频消息和视频号,有什么区别?
- 用Python实现微信自动化抢红包,再也不用担心抢不到红包了
- elasticsearch5之Elastalert 安装使用 配置邮件报警和微信报警
- 微信小程序(原生)——去掉原生导航栏
- 微信小程序——项目成员管理、小程序上传、发布步骤