小程序实现图片预览

小程序实现图片预览

小程序项目中有详情展示图片的情况，但是因为本身手机显示屏较小，所以图片要是能预览并且左右滑动查看是很方便并且提高用户体验，而且官方本身也有预览的图片的api，利于实现。以下是实现图片预览过程。

wxml代码.

// mode='aspectFill'为图片显示的具体尺寸，避免图片失真 <view class="pic"> <image wx:for='{{imageList}}' wx:key='item' src="{{item}}" mode='aspectFill' bindtap="preview" data-url='{{item}}'></image> </view>

js代码.

// 点击图片放大预览 preview: function (e) { // e.currentTarget.dataset.url能拿到当前点击的图片的url，前提是在wxml里配合使用data-url // urls(this.data.imageList)是从后台拿到图片的合集 wx.previewImage({ current: e.currentTarget.dataset.url, // 当前显示图片的http链接 urls: this.data.imageList // 需要预览的图片http链接列表 }) }

微信的预览方法在一下位置，大家可以自行去微信官方文档查看