微信小程序 图片查看

近期很多刚学习小程序的同学，想做哪种图片点击放大，然后可以左右滑动预览的效果。我也特意去研究下，发现直接用微信程序自己的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>