微信小程序实现图片预览功能

2019-11-19 14:26:13

字体：大中小

来源：转载

供稿：网友

本文为大家分享了微信小程序实现图片预览的具体代码，供大家参考，具体内容如下

效果图

图片预览效果图

原理

使用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;}

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下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：使用JS模拟锚点跳转的实例

下一篇：vue单页应用加百度统计代码（亲测有效）