需求

Taro框架中 Image 和 Video 组件预览图片/视频时 添加明显的关闭按钮 以关闭全屏观看，避免用户直接操作返回后导致页面空白（原有消息记录消失 - 重新进入项目首页）
【补充】

全屏预览图片使用的 API Taro.previewImage({}) ，全屏查看图片时，点击图片任意位置即可退出

全屏预览视频使用的 Video 组件上自带的放大视频按钮，全屏查看时可点击右下角缩小视频按钮退出全屏

实现

app.scss文件

$closeFullBtnColor: #fdfdfd;
// 视频/图片全屏预览添加右上角关闭按钮
.mediaFullClose {position: absolute;top: 50px;right: 50px;width: 60px;height: 60px;// background-color: red;// background: url(./images/close.png) no-repeat;// background-size: contain;// pointer-events: all; // 可以触发事件z-index: 99;border: 3px solid $closeFullBtnColor;border-radius: 70px;&::before,&::after {content: '';position: absolute;width: 40px;height: 5px;background-color: $closeFullBtnColor;top: 50%;left: 10px;}&::before {transform: rotateZ(45deg) translateY(-30%);}&::after {transform: rotateZ(-45deg) translateY(-30%);}
}

视频添加关闭按钮

标签结构图示

解释说明：点击关闭按钮，其实就是手动触发了一下视频底部的缩小视频控件。

// 当视频 进入/退出 全屏时触发【主要代码】
videoEnlarge() {const fullVideo = document.querySelector('.taro-video-container.taro-video-type-fullscreen')if (!fullVideo) return // 退出全屏时 returnconst closeBtnDom = document.createElement('div')closeBtnDom.className = 'mediaFullClose'setTimeout(() => {const closeFull = document.querySelector('.taro-video-fullscreen.taro-video-type-fullscreen')fullVideo.appendChild(closeBtnDom)closeBtnDom.addEventListener('click', () => {closeFull.click()})}, 100)
}

<Videosrc={item}controls={true}autoplayinitialTime='0'loop={false}muted={false}enablePlayGesturevslideGestureInFullscreenonFullscreenChange={this.videoEnlarge.bind(this)}
/>

图片大图预览添加关闭按钮

标签结构图示

imgEnlarge(e) {//查看图片var imgList = []imgList.push(e)Taro.previewImage({current: e, //当前图片urls: imgList, //图片列表success: () => {/**** 图片大图预览添加关闭按钮 start ****/const fullImage = document.querySelector('.wx-image-viewer .viewer-image-container')const closeBtnDom = document.createElement('div')closeBtnDom.className = 'mediaFullClose'fullImage.appendChild(closeBtnDom)/**** 图片大图预览添加关闭按钮 end ****/},})
}

【注】由于点击图片就会关闭大图预览，添加的关闭按钮正好在点击图片的区域内，所以此处不需要添加点击事件。

<Imagesrc={item}onClick={this.imgEnlarge.bind(this, item)}
></Image>

Taro框架中 Image 和 Video 组件预览图片/视频时添加明显的关闭按钮以关闭全屏预览相关推荐

vue3 - 【完整源码】超详细实现网站 / H5 在线预览 pdf 文件功能，支持缩放、旋转、全屏预览、打印、下载、内容检索、主题色定制、侧边缩略图、页码跳转等等（最好用的pdf预览器，注释详细！）
效果图在 Vue3.js 项目中,实现了快速高效的 pdf 预览器工具组件,附带详细的使用教程与详细的注释,保证一键复制轻松搞定! 详细的注释很容易二次修改,很多实用功能,你也可以自定义界面上的样式 ...
android 摄像头比例,Android摄像头是全屏预览最简单的方式.doc
Android摄像头是全屏预览最简单的方式 Android Camera做全屏预览之最简单方法 M厂开发五部:刘博一.全屏预览与非全屏预览的区别对于大多数人来说,我们看电影.玩游戏等都喜欢全屏, ...
android camera 全屏,Android Camera做全屏预览之最简单方法.doc
Android Camera做全屏预览之最简单方法 M厂开发五部:刘博一.全屏预览与非全屏预览的区别对于大多数人来说,我们看电影.玩游戏等都喜欢全屏,我们之所以喜欢全屏的一个主要原因就是全屏的感 ...
微信小程序video组件调用腾讯视频的解决方案
最近在开发中碰到了微信小程序video组件调用腾讯视频的问题,就趁机来总结一下. 对方只给了我一个腾讯视频的网页链接,然后需要放置到小程序里面,大概开发前景是这样的. 对方提供的视频链接: https ...
微信小程序图片全屏预览组件，并解决svg真机显示黑屏问题
自己码了个微信小程序图片全屏预览组件,并解决了svg真机显示黑屏问题(即png等格式可以正常显示,但就svg无法显示). /*** 微信小程序图片预览组件* 1.支持预览svg.png.jpeg.jp ...
Vue 单/多图片（可全屏预览）翻页轮播组件
支持单/多张图翻页轮播可全屏预览自定义图片宽高自定义无图提示语自带图片加载loading 可将源码根据实际需求改造. 没安装 Element-UI 的可以将图片标签换为原生效果图全屏预览 ...
vue3项目使用了element-plus中的el-table表格组件，缩放浏览器网页时，报错如下： ResizeObserver loop limit exceeded at eval (w
错误描述: vue3项目使用了element-plus中的el-table表格组件,缩放浏览器网页时,报错如下: ResizeObserver loop limit exceeded at eval ...
android从九宫格全屏预览,仿微信朋友圈展示图片的九宫格图片展示控件，支持点击图片全屏预览大图...
AssNineGridView 仿微信朋友圈展示图片的九宫格图片展示控件,支持点击图片全屏预览大图(可自定义). 写在前面这是一个九宫格控件,本来是很久之前就写好了,现在才开源出来,也是看了很多优秀 ...
微信小程序轮播图放大全屏预览（爆料）
轮播图放大预览效果的实现前言一.wx.previewImage接口API 官方介绍: 代码示例: 二.图片全屏预览 1.效果展示 2.编码 img.wxml img.js img.wxss 三.轮 ...

Taro框架中 Image 和 Video 组件预览图片/视频时添加明显的关闭按钮以关闭全屏预览

需求

实现

视频添加关闭按钮

图片大图预览添加关闭按钮

Taro框架中 Image 和 Video 组件预览图片/视频时添加明显的关闭按钮以关闭全屏预览相关推荐

最新文章

热门文章