首页 >> 科技前沿 >> 正文

小程序图片放大、预览、左右滑动2020-1-13｜阅读：617 次｜出处：｜编辑：管理员

• 小程序点击图片时，当前图片放大预览，且可以左右滑动

  
  

  
  

  
  

  实现方式：使用微信小程序图片预览接口

  

  我们可以看到api需要两个参数，分别通过下面的data-list和data-src来传到js中

  
  

  wxml代码：

  
  

  <span wx:for="{{ImgList}}" wx:key="key" data-index="{{index}}"> <image src="{{item}}" bindtap="imgYu" data-list="{{Order400.ImgList}}" data-src="{{item}}" mode="widthFix"></image> </span>

  js代码：

  
  

  
  

  imgYu: function (event) { var src = event.currentTarget.dataset.src; //获取data-src var imgList = event.currentTarget.dataset.list; //获取data-list //图片预览 wx.previewImage({ current: src, // 当前显示图片的http链接 urls: imgList // 需要预览的图片http链接列表 }) }

  
  

  
  

免责声明：本文所提供的信息（包括图片、文字、视频等）内容均来源于网络，只供参考之用，不代表本站观点。如有侵权、违规，请联系我们删除。

上一条：ASP.NET MVC 添加Model并连接到本地数据库下一条：C# 生成32位随机数