小程序中swiper是封装好的,它的性能配置这里不介绍了,不懂的同志可以点击https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html进行查看,上面介绍的很详细,但是上面没有说明swiper可以放大轮播,对于初学者来说是一脸懵逼。
听到放大轮播,脑子里第一反应是将整个swiper的宽高加倍,调整position和z-index,让它覆盖于其他组件之上,成功了,但只是粗糙的实现效果,当缩放回去的时候,页面其他组件出现瞬间的弹跳,因为swiper从原有的位置上移出,造成其他组件位置变动,于是又想到放置2个一样的swiper,一个放置原位,一个用于缩放,后者更改样式,进行显示隐藏操作即可,功能上实现了,但是代码量也增多。
在小程序的API上wx.previewImage接口(媒体-图片)可以实现此功能,并且swiper中的图片还能通过计算两指间距实现放大缩小,将接口放入image绑定的方法中就好。
接口配置 具体方法
网友评论