Skip to content
扫码开始移动端阅读

微信小程序实现全屏

209
需要≈
1.045
分钟
奇淫技巧
微信小程序

为何有这个需求

小程序胶囊按钮的样式太影响用户体验了,比如一些时钟,跑马灯等,需要全屏展示。

实现方法

原理并不复杂,就是使用video标签,在页面显示后设置视频元素全屏显示。

html
<video id="np-clocks" class="screen" controls="{{false}}" loop="{{true}}" bindtap="outFull" vslide-gesture-in-fullscreen="{{false}}"
  bindtap="tips" bindlongpress="outFull" enable-auto-rotation="{{true}}" show-fullscreen-btn="{{true}}">
  <!-- 要显示的内容 -->
</video>
js

Page({
  onReady() {
    this.video = wx.createVideoContext('np-clocks')
    this.fullScreen("in")
  },
  inFull() {
    this.fullScreen("in")
  },
  outFull() {
    this.fullScreen("out")
  },
  fullScreen(e) {
    if (e === "in") {
      this.video.requestFullScreen({
        direction: 90
      })
      this.video.hideStatusBar()
    } else {
      this.video.exitFullScreen();
    }
  },
  tips(e) {
    wx.showToast({
      title: '长按退出全屏',
      duration: 3000,
      icon: "none",
      mask: true
    })
  },
})

结语

实现的方式比较取巧,但是效果还不错。如果你想实现竖屏的全屏,应该需要用css旋转90度。但是我没有试过,如果你感兴趣,可以试试。

上次更新: