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

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

浏览量:736 时间: 来源:默认S

这个强大的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;  display: -webkit-flex;  flex-wrap: wrap;}.topic_answer_itemImg{  width: 210rpx;  height: 210rpx;  margin-right: 30rpx;  margin-bottom: 30rpx;}.topic_answer_itemImg:nth-of-type(3n){  margin-right: 0;}

index,js

  //预览图片  topic_preview: function(e){    var that = this;    var id = e.currentTarget.dataset.id;    var url = e.currentTarget.dataset.url;    var previewImgArr = [];    //通过循环在数据链里面找到和这个id相同的这一组数据,然后再取出这一组数据当中的图片    var data = that.data.topic_recomData;    for (var i in data) {      if (id == data[i].id) {        previewImgArr = data[i].pic;      }    }    wx.previewImage({      current: url, // 当前显示图片的http链接      urls: previewImgArr // 需要预览的图片http链接列表    })  },

这样就可以进行点击图片进行预览啦,啦啦啦啦,又写了一篇,简单而快乐的生活如此这般!嘿嘿嘿!

小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎