开发
API

响应显示区域变化

显示区域尺寸

显示区域指小程序界面中可以自由布局展示的区域。在默认情况下,小程序显示区域的尺寸是不会发生变化的,但是以下场景显示区域可以发生变化。

X 分屏及响应事件

在直播等场景中会出现 X 分屏(例如七分屏)的情况,从小程序基础库版本2.14.0开始,小程序支持组件和页面的生命周期函数onResize用于在显示区域的尺寸发生变化的时候返回当前页面的信息。其中组件需要作为页面配置到app.json中触发事件。

代码示例:

Page({
  onResize(res) {
    res.windowHeight; // 新的显示区域宽度
    res.windowWidth; // 新的显示区域高度
    res.screenRatio; // 全屏及分屏状态
    res.interactive; // 当前页面是在拖动中/停止拖动
  },
});
Component({
  methods: {
    onResize(res) {
      res.windowHeight; // 新的显示区域宽度
      res.windowWidth; // 新的显示区域高度
      res.screenRatio; // 全屏及分屏状态
      res.interactive; // 当前页面是在拖动中/停止拖动
    },
  },
});

Bug & tips:

  • Bug:scroll-view中分屏变为全屏时需要重新设置scroll-view高度,可能会出现空白区域问题
  • Bug:分屏状态下scroll-view向上滚动时会自动触发分屏向全屏的转换,全屏状态下向下滚动到尽头时会触发全屏向分屏的转换
点击纠错
评价此篇文档