微信小程序点击图片放大预览以及进行保存图片、发送给朋友等案例说明
·
wx.previewImage
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。
Object object
| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| urls | Array.<string> | 是 | 需要预览的图片链接列表。2.2.3 起支持云文件ID。 | ||
| showmenu | boolean | true | 否 | 是否显示长按菜单。 | 2.13.0 |
| current | string | urls 的第一张 | 否 | 当前显示图片的链接 | |
| referrerPolicy | string | no-referrer | 否 | origin: 发送完整的referrer; no-referrer: 不发送。格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本; | 2.13.0 |
| success | function | 否 | 接口调用成功的回调函数 | ||
| fail | function | 否 | 接口调用失败的回调函数 | ||
| complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执 |
使用示例:
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
})
案例:
单个图片点击在新的页面中放大预览
<image src="{{imagePath}}" mode="widthFix" show-menu-by-longpress="true" bindtap="look_auto_img" />
Page({
data: {
imagePath: "图片路径"
},
look_auto_img() {
let result_img = this.data.imagePath;
wx.previewImage({
current: result_img,
urls: [result_img]
})
}
})
如果是遍历出来的多个图片,获取索引,根据索引获取图片
<view wx:if="{{index!==0}}" class="photo_item">
<image src="{{item.images}}" mode="widthFix" show-menu-by-longpress="true" bindtap='look_auto_img' data-index="{{index}}"/>
</view>
look_auto_img(e){
let index = e.currentTarget.dataset.index;
let result_img = this.data.result1.photo[index].images;
wx.previewImage({
current: result_img,
urls: [result_img]
})
},
更多推荐
所有评论(0)