UniApp 页面获取宽度：两种方法详解

在 UniApp 页面开发中，经常需要获取页面的宽度进行布局调整。本文将介绍两种常用的方法，帮助你轻松获取页面宽度信息。

方法一：使用 uni.getSystemInfoSync() 获取设备屏幕宽度

使用 uni.getSystemInfoSync() 方法可以获取当前设备的屏幕宽度。示例代码如下：

let sysinfo = uni.getSystemInfoSync();
let screenWidth = sysinfo.screenWidth;
console.log('当前设备屏幕宽度为：' + screenWidth);

方法二：使用 uni.createSelectorQuery() 获取指定元素宽度

uni.createSelectorQuery() 方法可以获取页面中指定元素的宽度。示例代码如下：

uni.createSelectorQuery().in(this).select('.container').boundingClientRect(data => {
  let pageWidth = data.width;
  console.log('当前页面宽度为：' + pageWidth);
}).exec();

其中，'.container' 为页面中需要获取宽度的元素的 class 或 id。

总结

以上两种方法可以帮助你根据不同的需求获取页面宽度信息，灵活运用，实现更精细的页面布局。