微信小程序:点击图片进行预览
2017-12-23 15:59
218 查看
在开发需求中,经常有类似与九宫格的图片展示,当点击图片时进行图片的预览,如果多图的情况还可以左右滑动。
小程序中具体实现效果如下:
imgArr是我存放的静态数据,把图片地址存放在一个数组当中;
当点击某个图片是,根据data-index=”{{index}}”拿到当前图片的索引;
把当前图片放到current属性中,表示首先预览的图片是点击时的图片;
当然这只是一个demo,具体项目肯定是动态数据进行展示的,所以在项目当中我们可以把要进行预览展示的图片进行数组集合的处理,再根据上面步骤进行展示。
小程序中具体实现效果如下:
WXML <view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='img' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image> </view> </view>
随便写了一些样式 WXSS .imgList{ width: 100%; } .imgList .imgList-li{ width: 100%; } .imgList .imgList-li .img{ width: 400rpx; height: 400rpx; }
Js Page({ /** * 页面的初始数据 */ data: { imgArr:[ 'http://bpic.588ku.com/element_origin_min_pic/16/10/30/528aa13209e86d5d9839890967a6b9c1.jpg', 'http://bpic.588ku.com/element_origin_min_pic/16/10/30/54fcef525fa8f6037d180f3c26f3be65.jpg', 'http://bpic.588ku.com/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg', 'http://bpic.588ku.com/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg' ] }, previewImg:function(e){ console.log(e.currentTarget.dataset.index); var index = e.currentTarget.dataset.index; var imgArr = this.data.imgArr; wx.previewImage({ current: imgArr[index], //当前图片地址 urls: imgArr, //所有要预览的图片的地址集合 数组形式 success: function(res) {}, fail: function(res) {}, complete: function(res) {}, }) } })
imgArr是我存放的静态数据,把图片地址存放在一个数组当中;
当点击某个图片是,根据data-index=”{{index}}”拿到当前图片的索引;
把当前图片放到current属性中,表示首先预览的图片是点击时的图片;
当然这只是一个demo,具体项目肯定是动态数据进行展示的,所以在项目当中我们可以把要进行预览展示的图片进行数组集合的处理,再根据上面步骤进行展示。
相关文章推荐
- 微信小程序 --- 点击图片预览出现编辑器空白BUG
- 微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
- 小程序中图片点击预览、长按转发、保存、识别图中二维码
- 微信小程序实现点击图片旋转180度并且弹出下拉列表
- 微信小程序实现图片上传放大预览删除代码
- 微信小程序图片选择、上传到服务器、预览(PHP)实现实例
- 微信小程序----图片预览
- 微信小程序真机预览跟本地不同(轮播里面的商品图片不显示)
- 微信小程序图片预览保存发送给朋友previewImage
- 微信小程序实现弹窗预览图片
- 微信小程序 图片自适应及改变点击之后的样式
- 微信小程序的实现图片预览功能
- 【微信小程序】微信小程序wx.previewImage预览图片
- 微信小程序实现图片上传、删除和预览功能的方法
- 微信小程序商品详情页交互源码(选择商品类型切换、预览商品图片)
- 微信小程序实现图片预览功能
- 微信小程序预览图片
- 微信图片点击预览
- 微信小程序实现图片放大预览功能