微信小程序：点击图片进行预览

在开发需求中，经常有类似与九宫格的图片展示，当点击图片时进行图片的预览，如果多图的情况还可以左右滑动。

小程序中具体实现效果如下：

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，具体项目肯定是动态数据进行展示的，所以在项目当中我们可以把要进行预览展示的图片进行数组集合的处理，再根据上面步骤进行展示。

微信小程序：点击图片进行预览相关推荐

微信小程序点击图片放大预览，新页面中全屏预览图片
第一步:在wxml中定义image组件,并设置绑定事件. <image src="{{priceUrl}}" bindtap="imgClick"> ...
微信小程序 - 商城项目 - 图片详情预览
要实现点击图片后进行一个全屏图片的详细预览功能点击图片后使用wx自带的 wx.previewImage({ }) // 点击详情轮播图事件handleTap(e){// 全屏预览wx.previe ...
小程序点击图片放大预览
Banner图点击预览 wxml  <view class='home-banner'><swiper indicator-dots='tr ...
初学者笔记——微信小程序点击图片放大
微信小程序点击图片放大 wx.previewImage 官方文档的解释 PS:红色框框内要注意,需要预览的图片连接列表只支持网络连接图片,2.2.3版本以上支持云文件ID. 将图片dream.jpg上 ...
微信小程序解决请求服务器手机预览请求不到数据的方法
微信小程序解决请求服务器手机预览请求不到数据的方法微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat ...
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 先上效果图,再附上完整源码: 1.多张图片循环渲染后预览.保存.识别带参数二维码 <view w ...
微信小程序点击图片，可全屏预览图片，长按可保存可转发朋友
微信小程序官方方法:官方提供的 previewImage 方法,可点击顶部的官方链接查看直接上代码页面是一个轮播图(根据自己情况即可) 数据是服务端返的,存放在data中注意:构造要预览的图片 ...
微信小程序在开发者工具和预览下边跳转都好好的真机预览就找不到页面，报错 {“errMsg“:“navigateTo:fail page \“***\“ is not found“}
微信小程序开发有这么一种情况: 在开发者工具里边随便点随便跳转,页面都能找到点击预览,手机扫码来回点来回跳,页面都能找到点击真机预览,来回点来回跳,偶尔页面就找不到了报错:(in promise ...
微信小程序---下载、打开及预览PDF文件的方法
微信小程序的常用功能:打开PDF格式的文档.小程序的官方API是 wx.downloadFile.wx.openDocument(点击可以直接跳转到官方文档的解释) 详细用法请看Demo: //下载P ...
微信小程序开发者工具升级自动预览功能，福利啊
原来的预览方式,每次都得扫码! 现在的预览方式,只要点击预览,选择"自动预览",点击编译并预览,手机端会自动同步,是相当的不错哦.

微信小程序：点击图片进行预览

微信小程序：点击图片进行预览相关推荐

最新文章

热门文章