微信小程序中图片预览功能怎么弄

　　介绍

小编给大家分享一下微信小程序中图片预览功能怎么弄,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

效果图

微信小程序中图片预览功能怎么弄

原理

<李>

使用wx.chooseImage选择本地图片;

<李>

使用wx。previewImage预览图片。

WXML

& lt; view> 　　,& lt; button  bindtap=皃reviewImage",类型=皃rimary"在图片上传预览& lt;/button> 　　,& lt; view 类=皌ui-content"祝辞, 　　& lt;才能image 类=皌ui-preview-img",天气:为=皗{previewImageArr}}“, bindtap=癶ttps://www.yisu.com/zixun/changePreview", src="{{项}}" src="{{项}}"> 　　 　　

wxs

页面{background - color: # efeff4;} 　　.tui-preview-img { 　　,宽度:200 rpx; 　　,身高:120 rpx; 　　}

JS

页面({ 　　,数据:{ 　　previewImageArr才能:[] 　　}, 　　,previewImage (e) { 　　var 才能;self =,; 　　wx.chooseImage({才能 　　,,数:8 　　,才能成功(res), { 　　,,,var  tempFilePaths =, res.tempFilePaths; 　　,,,self.setData ({, previewImageArr: tempFilePaths}); 　　,,} 　　})才能 　　}, 　　,changePreview (e) { 　　var 才能;self =,; 　　wx.previewImage({才能 　　,,,目前:e.currentTarget.dataset.src, 　　,,url: self.data.previewImageArr 　　})才能 　　,} 　　})

<>强注意

天气。当前previewImage的参数和url必须是http链接。

以上是“微信小程序中图片预览功能怎么弄”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

微信小程序中图片预览功能怎么弄