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

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

 

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

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

WXML
     
 
   
 


随便写了一些样式
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/62e3ca3a02dddb