微信小程序图片轮播+预览效果实现

实现思路

功能其实很简单，只需用到官方提供的swiper组件+wx.previewImage函数，再利用data-组件绑定当前的url即可轻松实现。
1.微信小程序swiper组件
2.微信小程序预览图片函数

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

代码实现

• WXML

• 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