微信小程序选择图片和放大预览图片功能

视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片.

wx.chooseImage({})

此方法是用来选择图片的方法,具体使用如下:

首先在数据中定义接收数据的变量，然后调用方法选择图片，将图片显示出来。

此时我们定义的全局变量,也就是data中的url,已经有值了,现在只需要在页面中显示即可。

如果是多选的话,在显示的时候,就不应该直接显示数据源了,这样会报错的,因为返回的是数组:

图片预览:

下面说一下图片预览:

首先在data中定义好数据源:

然后创建方法previewImage,实现图片预览:

然后再页面中边遍历数据,显示:

先列表显示全部图片,绑定预览方法,点击图片进行左右预览,

下面在给大家补充下微信小程序图片放大预览功能，具体内容介绍如下所示：

需求：当点击图片时，当前图片放大预览，且可以左右滑动

实现方式：使用微信小程序图片预览接口

我们可以看到api需要两个参数，分别通过下面的data-list和data-src来传到js中

wxml代码：

js代码：

1.给图片添加一个点击事件(imgYu)

2.使用event.currentTarget.dataset.自定义属性名称 来获取data-的值 如event.currentTarget.dataset.src (获取data-src的值)

3.之后将获取的两个值 放到wx.previewImage接口 里面即可

效果图片如下：可以左右滑动上一张下一张

总结

以上所述是小编给大家介绍的微信小程序选择图片和放大预览图片功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!