【微信小程序】小程序点击图片放大(图片预览)

这个强大的API( wx.previewImage() )，嘿嘿嘿！接下来我们来讲一下微信小程序中图片点击放大预览的实现步骤！

思路：

1.点击事件

2.放大

3.左右滑动查看上、下一张

在绑定点击事件的时候我们需要同时获取到点击图片的url和这一组数据的ID(通过这个id从数据里面找到你点击的这一组数据然后从中取出这一组图片就可以了)

index.wxml

 <view class='topic_answerImg'>
              
    <block wx:for='{
  {item.answerImg}}' wx:key='index' wx:for-item='answerItem'>
        <image bindtap='topic_preview' data-id='{
  {item.id}}' data-url='{
  {answerItem}}' class='topic_answer_itemImg' src='{
  {answerItem}}'></image>
    </block>

</view>

 注意：上面获取的ID是这一组数据的id不是这个图片的id

index.wxss

.topic_answerImg{
  width: 100%;
  display: -webkit-box;