博客

实现思路

功能其实很简单，只需用到官方提供的swiper组件+wx.previewImage函数，再利用data-组件绑定当前的url即可轻松实现。

1.

微信小程序swiper组件


2.

微信小程序预览图片函数

需要注意的是wx.previewImage这个函数中的2个参数current以及urls不能填写本地地址

代码实现

• WXML

<swiper class="" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
  <block wx:for="{{picList}}" wx:key="index">
    <swiper-item>
      <image src="{{item}}" class="slide-image" mode="aspectFill" bindtap='previewImg' data-previewurl='{{picList}}'
      data-currenturl='{{item}}'/>
    </swiper-item>   
  </block>  
</swiper>

• JS

Page({
  data: {

  },

  //预览图片
  previewImg: function (e) {
    var currentUrl = e.currentTarget.dataset.currenturl
    var previewUrls = e.currentTarget.dataset.previewurl
    wx.previewImage({
      current: currentUrl, //必须是http图片，本地图片无效
      urls: previewUrls, //必须是http图片，本地图片无效
    })
  },

  onLoad: function() {
    var that = this
    var picList = []
    picList.push("https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1623318287,3864173199&fm=27&gp=0.jpg")
    picList.push("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532429494100&di=6d4f20a64fb21f113e1bb67be1cdbb63&imgtype=0&src=http%3A%2F%2Fimg.juimg.com%2Ftuku%2Fyulantu%2F121019%2F240425-12101920154274.jpg")
    picList.push("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532429494100&di=f3712ddf9ca5b37bf81f2cea4ae40c54&imgtype=0&src=http%3A%2F%2Fpic32.photophoto.cn%2F20140808%2F0042040230406581_b.jpg")
    that.setData({
      picList: picList,
    })
  }
})

• WXSS

page{
  background: #f9f9f9;
}
.slide-image{
  width: 100%;
}

本功能github地址：

https://github.com/parasol-wu/wxapp-img-wall