微信小程序轮播图放大预览

微信小程序轮播图放大预览

1.wxml文件

<view wx:if="{{ banner.data.banner.length > 0}}" class="height110" >
        <swiper indicator-dots="true" autoplay="true" interval="3000" duration="500">
            <block wx:for="{{banner.data.banner}}" wx:key="key">
                <swiper-item>
                    <image style ="width:100%;height:150px" bindtap="imgYU"  data-list="{{banner.data.banner}}" data-src="{{item.pic}}" src='{{item.pic}}' ></image>
                </swiper-item>
            </block>
        </swiper>
</view>

2.ts文件

  /**
   * 轮播图放大预览
   */
  imgYU: function (event: WxBindRes) {
    var src = event.currentTarget.dataset.src;//获取图片的data-src
    var imgList = event.currentTarget.dataset.list;//获取图片的data-src
    var arr = new Array();
    for (var i = 0; i < imgList.length; i++) {
      arr[i] = imgList[i].pic;
    }
    wx.previewImage({
      current: src,
      urls: arr
    })
  },

使用微信小程序云开发写的个人简历小程序和好玩的关联微信运动遛狗的小程序，内置天气查询功能。欢迎大家扫码体验，项目详情也可到我的置顶博客查看。项目都已在码云上开源，欢迎大家star。wx_superpet这个小程序项目特别适合对微信小程序云开发技术感兴趣的同学参考。
个人简历源码：个人简历码云地址
wx_superpet源码:wx_superpet码云地址