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

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

wx.chooseImage({})

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

 data: {  avatarUrl:null },

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

bindViewTap:function(){  var that = this;  wx.chooseImage({  // 设置最多可以选择的图片张数，默认9,如果我们设置了多张,那么接收时//就不在是单个变量了,   count: 1,    sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有   sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有   success: function(res){    // 获取成功,将获取到的地址赋值给临时变量    var tempFilePaths = res.tempFilePaths;    that.setData({    //将临时变量赋值给已经在data中定义好的变量     avatarUrl:tempFilePaths    })   },   fail: function(res) {    // fail   },   complete: function(res) {    // complete   }  }) }

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

//点击此按钮调用选择图片的方法,成功后将图片显示在image标签上 <button bindtap="bindViewTap" type="submit">绑定事件</button><image src="{{avatarUrl}}"></image>

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

<image wx:for="{{avatarUrl}}" wx:key="unique" src="{{item}}"></image>

图片预览:

下面说一下图片预览:

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

data:{  avatarUrl:null,  pictures: [ '/d/know/2023030503/eyt2o3jxcox.webp',   '/d/know/2023030503/dwkoz4xxe4g.webp',   '/d/know/2023030503/v1cnnihauev.webp',   '/d/know/2023030503/hnwls3qlo3p.webp',   '/d/know/2023030503/2yysgf5zlpk.webp',   '/d/know/2023030503/5nfw1v5vfey.webp',   '/d/know/2023030503/necxlsz1lwq.webp',   '/d/know/2023030503/nfwfgqf0qxw.webp'  ] },

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

 previewImage: function(e){  var that = this,  //获取当前图片的下表    index = e.currentTarget.dataset.index,    //数据源    pictures = this.data.pictures;  wx.previewImage({  //当前显示下表   current: pictures[index],   //数据源   urls: pictures  }) }

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

<view> <image wx:for="{{pictures}}" wx:key="unique"src="{{item}}" data-index="{{index}}" bindtap="previewImage"></image></view>

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

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

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

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

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

wxml代码：

 <!--图片描述--> <view wx:if="{{item.pictures}}" class="list-dImg"> <image bindtap="imgYu" data-list="{{item.pictures}}" data-src="{{dImg}}" wx:for="{{item.pictures}}" wx:for-item="dImg" src="{{dImg}}"></image> </view>

js代码：

//图片点击事件 imgYu:function(event){ var src = event.currentTarget.dataset.src;//获取data-src var imgList = event.currentTarget.dataset.list;//获取data-list //图片预览 wx.previewImage({ current: src, // 当前显示图片的http链接 urls: imgList // 需要预览的图片http链接列表 }) }

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

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

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

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