美文网首页
小程序swiper图片缩放预览

小程序swiper图片缩放预览

作者: 局外人12 | 来源:发表于2018-11-15 10:45 被阅读0次

            小程序中swiper是封装好的,它的性能配置这里不介绍了,不懂的同志可以点击https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html进行查看,上面介绍的很详细,但是上面没有说明swiper可以放大轮播,对于初学者来说是一脸懵逼。

            听到放大轮播,脑子里第一反应是将整个swiper的宽高加倍,调整position和z-index,让它覆盖于其他组件之上,成功了,但只是粗糙的实现效果,当缩放回去的时候,页面其他组件出现瞬间的弹跳,因为swiper从原有的位置上移出,造成其他组件位置变动,于是又想到放置2个一样的swiper,一个放置原位,一个用于缩放,后者更改样式,进行显示隐藏操作即可,功能上实现了,但是代码量也增多。

            在小程序的API上wx.previewImage接口(媒体-图片)可以实现此功能,并且swiper中的图片还能通过计算两指间距实现放大缩小,将接口放入image绑定的方法中就好。

    接口配置 具体方法

    相关文章

      网友评论

          本文标题:小程序swiper图片缩放预览

          本文链接:https://www.haomeiwen.com/subject/onsefqtx.html