微信小程序：常用功能6——点击图片，实现图片的预览功能wx.previewImage(Object object, boolean showmenu)

向用户展示图片时，为了展现布局的美观性，往往不同尺寸的图片要放在相同大小的容器中。
但是图片想让用户看清、或者保存时，我们就要进行图片的预览，像用户展示原图。
图片预览接口：wx.previewImage(Object object, boolean showmenu)。在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

首先，我再百度找几张图片放在data里边待用

这里要用数组，因为这个接口的运行方式是在图片列表中显示其中的某一个图片，列表是数组格式。

然后，在wxml里边把图片数组遍历显示出来：

<view wx:for="{{pic}}" wx:key="key"><image src="{{item}}" style="width:100%;" mode='aspectFill'></image>
</view>

其中，mode="aspectFill"作用是设置三张图片的缩放模式：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

现在我们做点击图片，进行图片预览。

给图片加一个bindtap="see"点击指令。

<view wx:for="{{pic}}" wx:key="key"><image src="{{item}}" style="width:100%;" mode='aspectFill' bindtap="see"></image>
</view>

js使用预览图片的接口wx.previewImage(Object object, boolean showmenu):

  see(e){console.log(e)let indx = e.currentTarget.dataset.index // 找到点击图片的索引位置wx.previewImage({current: this.data.pic[indx], // 当前显示图片的http链接，将点击图片的索引数指定好urls: this.data.pic // 需要预览的图片http链接列表})},

此时就可以进行图片预览了，同时开可以左右滑动切换。有意思：）

我不是专业程序工作者，在这里是把我的小程序设计经验分享给大家。
如果其中有用词不当的地方，请大家留言指正，我们共同学习。
更多设计、功能的学习经验，大家也可以去我的公众号查看！
————

微信小程序：常用功能6——点击图片，实现图片的预览功能wx.previewImage(Object object, boolean showmenu)相关推荐

微信小程序开发工具能正常请求后台数据，手机预览请求失败
微信小程序开发工具能正常请求后台数据,手机预览请求失败问题描述微信开发者工具调试完想用手机预览效果,结果发现凡是后台请求都失败. 原因分析可能的原因有三个: 微信开发者工具详情里的本地设置,没有 ...
微信小程序基于vant和springboot实现附件上传和预览
前言图片上传和预览在移动端应用非常广泛和频繁,vant组件库van-uploader组件已经帮我们实现了大部分功能,但是在系统中频繁使用还是有点麻烦,我们根据自身的业务系统重新封装了一下简化我们的开 ...
微信小程序-上传多张图片加进度条（支持预览、删除）
2018-12-24 详情示例见:https://www.cnblogs.com/cisum/p/9564898.html 2018-12-29 组件下载见:https://www.cnblogs.c ...
vc++6.0获取磁盘基本信息_微信小程序——常用功能2：微信小程序用户登录，申请用户授权并获取用户基本信息...
微信小程序--常用功能2:申请用户授权并获取用户基本信息为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...
微信小程序常用视图容器组件
微信小程序常用视图容器组件 1.组件概述 2.常用的试图容器组件 2.1 view 2.1.1 案例 2.2 scroll-view 2.2.1 案例 2.3 swiper 2.3.1 案例 1.组件 ...
【小程序开发必备】微信小程序常用API全介绍，附示例代码和使用场景
文章目录 1.网络请求相关API 1.1 wx.request 1.2 wx.uploadFile 1.3 wx.downloadFile 1.4 wx.connectSocket 2.页面跳转相关A ...
微信小程序常用表单组件
微信小程序常用表单组件 1.常用表单组件 1.1 button 1.2 checkbox 1.3 input 1.4 label 1.5 form 1.6 radio 1.7 slider 1.8 s ...
java小程序显示多种按钮_微信小程序多行文本显示...+显示更多按钮和收起更多按钮功能...
看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 先来个效果图 html {{item.text}} 查看更多收起 wxss .box ...
微信小程序-常用api
文章目录微信小程序-常用api 路由 wx.switchTab(Object object) wx.navigateTo(Object object) wx.navigateBack(Object ...
【小程序】微信小程序常用api的使用，附案例（建议收藏）
1- 前言这是微信小程序常用的几个API,特地总结一下: 学会使用微信官方文档 · 小程序 2- 界面 2.1 wx.setNavigationBarTitle() 标题栏文本 wx.setNav ...

微信小程序：常用功能6——点击图片，实现图片的预览功能wx.previewImage(Object object, boolean showmenu)

首先，我再百度找几张图片放在data里边待用

然后，在wxml里边把图片数组遍历显示出来：

现在我们做点击图片，进行图片预览。

微信小程序：常用功能6——点击图片，实现图片的预览功能wx.previewImage(Object object, boolean showmenu)相关推荐

最新文章

热门文章