1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 微信小程序 之wx.previewImage图片预览(多张图片预览)

微信小程序 之wx.previewImage图片预览(多张图片预览)

时间:2020-07-18 01:44:05

相关推荐

微信小程序 之wx.previewImage图片预览(多张图片预览)

wxml部分代码如下:

<block wx:for="{{pictures}}" wx:for-item='item' wx:for-index='idx'><image class="wehx_picture" src="{{item}}" data-index="{{idx}}" bindtap="previewImage"></image></block>

js部分代码如下:

var app = getApp();Page({data:{pictures: ['/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg','/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg','/movie/0c49f98a93881b65b58c349eed219dba290900.jpg'],//已选择的图片临时路径数组},//图片预览previewImage:function(e){var index = e.currentTarget.dataset.index;var pictures = this.data.pictures;wx.previewImage({current: pictures[index], // 当前显示图片的http链接urls: pictures, // 需要预览的图片http链接列表})},})

css部分代码如下:

.wehx_picture {width: 50rpx;height: 50rpx;margin-right: 14rpx;}

最终效果如下:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。