Add an obvious close button to close the full-screen preview when the Image and Video components in the Taro framework preview pictures/videos

need

Add an obvious close button in the Taro framework Imageand when previewing pictures/videos in components to close full-screen viewing, so as to avoid blank pages after the user directly operates and returns (the original message record disappears - re-enter the project homepage) [Supplement]Video

1. The API used to preview pictures in full screen Taro.previewImage({}). When viewing a picture in full screen, click anywhere on the picture to exit
2. The zoom in video button on the Video component used for full screen preview video can be clicked on the zoom out video button in the lower right corner to exit full screen when viewing in full screen

accomplish

app.scss file

$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%);
  }
}

video add close button

Label Structure Diagram

Explanation: Clicking the close button is actually manually triggering the zoom-out video control at the bottom of the video.

// 当视频 进入/退出 全屏时触发【主要代码】
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)}
/>

Add a close button to the large image preview

Label Structure Diagram

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 ****/
    },
  })
}

[Note] Since clicking the picture will close the big picture preview, the added close button is just in the area where the picture is clicked, so there is no need to add a click event here.

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