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

实现思路

功能其实很简单，只需用到官方提供的swiper组件+wx.previewImage函数，再利用data-组件绑定当前的url即可轻松实现。
1.微信小程序swiper组件
<https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html>
2.微信小程序预览图片函数
<https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html#wxpreviewimageobject>

需要注意的是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
<https://github.com/parasol-wu/wxapp-img-wall>

热门工具换一换