这里实现了如下功能和细节:
- 支持左右滑动
- 图片双指缩放
- 单击图片返回
- 双击放大缩小
- 图片视频混排
- 显示图片描述
- 将pages中的preview-media-desc复制到您的项目中
- 在app.json中注册该page
- 具体可以参照项目目录index中的用法
app.globalData.previewInfo = {
list: [
{
picUrl: "",
video: "",
desc: ""
}
],
current: 0
}
wx.navigateTo({
url: '../../pages/preview-media-desc/index',
})
- 如果你需要使用视频,那么将会涉及到一个视频的宽高比例问题,这里我使用wx.getImageInfo()来获取视频封面的宽高比,从而知道video容器的高度。使用wx.getImageInfo()来获取网络图片的宽高必须配置download域名,否则最好你的接口能直接返回video的宽高信息,然后通过屏幕宽度计算出video容器的高度,这样显示的视频就会是按比例铺满整个手机的宽度。
- 在preview-media-desc/item/item-index中可找到对应的代码