微信小程序获取视口高度,设置 video 视频全屏显示

微信小程序 获取视口高度

获取视口高度 可用于设置视频全屏显示效果 及其他效果显示

1. js中:(可以在onLoad中直接使用,或写入方法中)

	let that = this;
    // 获取系统信息
    wx.getSystemInfo({
      success: function (res) {   
        let clientHeight = res.windowHeight;// 窗口宽度
        let clientWidth = res.windowWidth; // 窗口高度
        let ratio = 750 / clientWidth; // 比例 这里的比例是对比 iPhone6/7/8而言 ,若在iPhoneX 也可以沿用此逻辑
        let height = clientHeight * ratio;// 高度(单位rpx)
        that.setData({// 高度 存储
          height: height
        });
      }
    });

2. wxml中:

<view class="videoPlay">
    <video id="video" src="{{视频路径}}" autoplay='true' loop='true' enable-progress-gesture
      show-center-play-btn enable-play-gesture='true' style="height:{{height + 'rpx'}}">
    </video>
  </view>

3. 记得在 data中定义变量,我在这里定义了一个 height 但因为该数据是没有单位的,所以在使用时需要拼接单位哦
4. 大功告成啦😝