uni-app 微信小程序 可添加图片描述的uni.previewImage/wx.previewImage

前言

最近公司项目要做一个小程序的图片预览页面，但要支持预览时有图片描述和一些其余操作按钮...同时还要支持图片放大和图片左右滑动切换效果

然后我查了一下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哈，谢谢。