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

需求

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

1. 全屏预览图片使用的 API Taro.previewImage({}) ，全屏查看图片时，点击图片任意位置即可退出
2. 全屏预览视频使用的 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>