一个菜鸟的互联网技术分享博客
您的位置: 主页 > 微信小程序点击轮播图在新页面中全屏预览图片
advertisement

微信小程序点击轮播图在新页面中全屏预览图片

xml部分:
  1. <swiper  class='imgList' circular="true">        
  2.   <swiper-item class='imgList-li' wx:for='{{imgArr}}'>  
  3.     <image class='img' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image>  
  4.   </swiper-item>  
  5. </swiper>  
css部分(根据自己的项目写最好):
  1. .imgList{  
  2.   width: 100%;  
  3. }  
  4. .imgList .imgList-li{  
  5.   width: 100%;  
  6. }  
  7. .imgList .imgList-li .img{  
  8.   width: 100%;  
  9.   height: 400rpx;  
  10. }  
js部分:
  1. Page({  
  2.   data: {  
  3.     imgArr:[  
  4.       'http://bpic.588ku.com/element_origin_min_pic/16/10/30/528aa13209e86d5d9839890967a6b9c1.jpg',  
  5.       'http://bpic.588ku.com/element_origin_min_pic/16/10/30/54fcef525fa8f6037d180f3c26f3be65.jpg',  
  6.       'http://bpic.588ku.com/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg',  
  7.       'http://bpic.588ku.com/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg'  
  8.     ]  
  9.   },  
  10.   previewImg:function(e){  
  11.     console.log(e.currentTarget.dataset.index);  
  12.     var index = e.currentTarget.dataset.index;  
  13.     var imgArr = this.data.imgArr;  
  14.     wx.previewImage({  
  15.       current: imgArr[index],     //当前图片地址  
  16.       urls: imgArr,               //所有要预览的图片的地址集合 数组形式  
  17.       success: function(res) {},  
  18.       fail: function(res) {},  
  19.       complete: function(res) {},  
  20.     })  
  21.   }  
  22. }) 
微信小程序编辑器中的截图如下:




源码下载地址
zhangren.online
上一篇:让原生小程序支持 async/await的runtime.js
下一篇:微信小程序组件之rich-text,转义显示富文本操作

您可能喜欢

回到顶部