需求
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 // 退出全屏时 return
const 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)
}
<Video
src={item}
controls={true}
autoplay
initialTime='0'
loop={false}
muted={false}
enablePlayGesture
vslideGestureInFullscreen
onFullscreenChange={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 ****/
},
})
}
【注】由于点击图片就会关闭大图预览,添加的关闭按钮正好在点击图片的区域内,所以此处不需要添加点击事件。
<Image
src={item}
onClick={
this.imgEnlarge.bind(this, item)}
></Image>