评论

大图预览下添加图片描述,到底该怎么办呢?

微信小程序图片预览添加描述、wx.previewImage添加图片描述、wx.previewMedia添加图片描述

前言

产品说什么也要在大图预览下加图片描述,我说微信小程序不支持,wx.previewImage和wx.previewMedia都是我们自己改不了的。但是无奈非得要,那我说:加可以,但是做不到像wx.preview那样完美,右上角会有胶囊按钮,其它体验也会也些差距。为了加这个图片描述,我是抽业余时间搞了好多天才搞出来,真是。。。

示例动图

实现思路和方案:

  1. 将navigationBar隐藏掉,然后黑色背景一搞,左右切换使用swiper。
  2. 因为考虑到swiper加载item太多会有渲染问题,我们在这里使用之前写的库swiper-limited-load。
  3. 图片使用movable-view来实现双指缩放和移动功能,此外图片还应该有双击缩放,单击退出等功能
  4. 视频使用video组件,要考虑到只有滑动到当前item,才去渲染当前item的video组件,要不然出现左右两个video也跟着一起播放的情况就尴尬了。
  5. 视频要实现宽度铺满,按宽高比例显示,需要知道视频的宽高比,这里可以用wx.getImageInfo来获取视频封面图片的信息(网络图片需要配置download域名),或者如果你们的接口会返回视频的宽高信息,根据屏幕宽度,直接设置高度也行。

总结

微信自带的wx.previewImage和wx.previewVideo其实已经挺好用了。就为了一个图片描述,我们自己造这么个轮子,得好几天时间,而且这个轮子还不如原来的好用。面对这种情况,这就看是要如何取舍了,是要开发效率,还是要用户体验。既然产品需要,那就硬刚吧。。。

项目地址:https://github.com/pengboboer/preview-media-desc

如果错误,欢迎指出。

如有新的需求也可以提出来,如果有时间的话,我会帮你们完善。

如果能帮到你们,记得给一个star,谢谢。

最后一次编辑于  09-24  
点赞 3
收藏
评论

2 个评论

  • 时迁
    时迁
    09-29

    厉害啊,涨知识了,收藏

    09-29
    赞同
    回复
  • 雨声
    雨声
    09-24

    sixsixsix

    09-24
    赞同
    回复
登录 后发表内容