近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果。我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现。今天就来教大家如何实现小程序图片点击放大的效果。
话不多说,直接上代码
JS
var image = res.target.dataset.image
var id = res.target.dataset.id
wx.previewImage({
//照片集
urls: this.data.data[id].image,
单张
current: image
})
WXML
<block wx:for="{{ data }}" wx:key="data" wx:for-index="ids">
<view>{{ item.title }}</view>
二层循环规则
<view wx:for="{{ item.image }}" wx:for-item="items" wx:key="image">
<image src="{{ items }}" bindtap="images" data-image="{{items}}" data-id="{{ids}}"></image>
</view>
<view wx:for="{{ item.video }}" wx:for-item="items" wx:key="image">
<video src="{{ items }}" data-image="{{items}}" data-id="{{ids}}"></video>
</view>
</block>