小程序 处理页面布局变化

Question

页面布局变化

对于不同尺寸的显示区域，页面的布局会有所差异。此时可以使用 media query 来解决大多数问题。

1. 在 WXML 中，可以使用 match-media 组件来根据 media query 匹配状态展示、隐藏节点。
2. 此外，可以在页面 或 自定义组件 JS 中使用 this.createMediaQueryObserver() 方法来创建一个 MediaQueryObserver 对象，用于监听指定的 media query 的匹配状态

控制一些精细的布局变化

使用 js 作为辅助。在 js 中读取页面的显示区域尺寸，可以使用 selectorQuery.selectViewport 。

页面尺寸发生改变时，可以使用页面的 onResize 来监听。

// 页面
Page({
  onResize(res) {
    res.size.windowWidth // 新的显示区域宽度
    res.size.windowHeight // 新的显示区域高度
  }
})

对于自定义组件，可以使用 resize 生命周期来监听，回调函数中将返回显示区域的尺寸信息。

// 自定义组件
Component({
  // 所属页面生命周期
  pageLifetimes: {
    resize(res) {
      res.size.windowWidth // 新的显示区域宽度
      res.size.windowHeight // 新的显示区域高度
    }
  }
})

此外，还可以使用 wx.onWindowResize 来监听（但这不是推荐的方式）