前言
最近公司项目要做一个小程序的图片预览页面,但要支持预览时有图片描述和一些其余操作按钮...同时还要支持图片放大和图片左右滑动切换效果
然后我查了一下uniapp和小程序的相关api,previewImage只支持传入图片数组,点击后预览的页面不支持加入其余元素,没办法只能自己写了~
刚开始是一点头绪都没有,没办法老板逼着要,最后花了一个多礼拜,终于是写出来了
效果肯定是没有原生的好,而且其它体验也会也些差距,但总算满足了老板的需求。。。
项目示例
看不了的话可以去外链
实现思路和方案
1、图片要左右切换的话,那就直接上轮播swiper,使用movable-view来实现双指缩放和移动功能
2、在swiper-item上使用@touchmove.stop事件禁用swiper的手指滑动功能(这个卡了我好久,一直没想到),然后我们自己在方法里控制左右切换
3、用点击事件记录手指的坐标,判断用户的上下左右滑动,然后根据结果来手动切换图片
大致思路就这样了~
总结
uni和微信自带的previewImage其实已经挺好用了。就为了一个图片描述,我们自己造这么个轮子,得好几天时间,而且这个轮子还不如原来的好用。面对这种情况,这就看是要如何取舍了,是要开发效率,还是要用户体验。既然产品需要,那就硬刚吧。。。
项目地址:https://github.com/justinGuox/previewImage
码云:https://gitee.com/XiNian0430/previewImage
项目还有些不完善的地方,如果哪位大佬有幸看出了问题,欢迎指出~
如果能帮到你们,记得给一个star哈,谢谢。