大图预览下添加图片描述,到底该怎么办呢?
前言 产品说什么也要在大图预览下加图片描述,我说微信小程序不支持,wx.previewImage和wx.previewMedia都是我们自己改不了的。但是无奈非得要,那我说:加可以,但是做不到像wx.preview那样完美,右上角会有胶囊按钮,其它体验也会也些差距。为了加这个图片描述,我是抽业余时间搞了好多天才搞出来,真是。。。 示例动图 [图片] 实现思路和方案: 将navigationBar隐藏掉,然后黑色背景一搞,左右切换使用swiper。因为考虑到swiper加载item太多会有渲染问题,我们在这里使用之前写的库swiper-limited-load。图片使用movable-view来实现双指缩放和移动功能,此外图片还应该有双击缩放,单击退出等功能视频使用video组件,要考虑到只有滑动到当前item,才去渲染当前item的video组件,要不然出现左右两个video也跟着一起播放的情况就尴尬了。视频要实现宽度铺满,按宽高比例显示,需要知道视频的宽高比,这里可以用wx.getImageInfo来获取视频封面图片的信息(网络图片需要配置download域名),或者如果你们的接口会返回视频的宽高信息,根据屏幕宽度,直接设置高度也行。总结 微信自带的wx.previewImage和wx.previewVideo其实已经挺好用了。就为了一个图片描述,我们自己造这么个轮子,得好几天时间,而且这个轮子还不如原来的好用。面对这种情况,这就看是要如何取舍了,是要开发效率,还是要用户体验。既然产品需要,那就硬刚吧。。。 项目地址:https://github.com/pengboboer/preview-media-desc 如果错误,欢迎指出。 如有新的需求也可以提出来,如果有时间的话,我会帮你们完善。 如果能帮到你们,记得给一个star,谢谢。