小程序-轮播图预览图片功能开发

在一个程序的多个地方，都有用轮播图预览图片的功能，这时候我们可以把这个前端页面抽离出来，因为小程序是单向数据流方式，所以，数据需要在引用的当前页面定义。

     

图片预览前端 preview-images.wxml

<swiper class="slides" 
    indicator-dots="{{images.length > 1}}" 
    indicator-color="#bcc0c9" 
    indicator-active-color="#3a4861">
    <swiper-item wx:for="{{images}}" wx:key="id">
        <image mode="aspectFill" src="{{item}}" bindtap="previewHandle" data-src="{{item}}" />
    </swiper-item>
</swiper>

在detail.wxml中引用这个页面：

<include src="/includes/preview-images.wxml"/>

在detail.js中设置预览功能：

    // 图片全屏预览
    previewHandle(e) {
        wx.previewImage({
          current: e.target.dataset.src,// 当前显示图片的http链接，单页面传参的方式拿到src
          urls: this.data.shop.images,// 需要预览的图片http链接列表
          // success(res) {
          //   console.log(res)
          // }
        })
    }