uniapp 自适应屏幕大小
时间: 2025-01-18 13:47:27 浏览: 131
### UniApp 中实现屏幕自适应的方法
#### 获取设备信息并动态设置样式
为了使应用能够适配不同尺寸的屏幕,在 `onReady` 生命周期钩子中可以调用 `uni.getSystemInfo` 接口来获取当前设备的信息,比如窗口的高度。通过这些数据,可以根据实际需求调整组件的位置和大小。
```javascript
export default {
data() {
return {
navHeight: 0,
pH: 0
};
},
onReady() {
const that = this;
uni.getSystemInfo({
success(res) {
that.pH = res.windowHeight;
const query = uni.createSelectorQuery();
query.select('.sv').boundingClientRect((rect) => {
if (rect) {
that.navHeight = that.pH - rect.top;
}
}).exec();
}
});
}
}
```
此段代码展示了如何在页面加载完成后立即执行一次高度测量操作,并将结果保存至 Vue 组件的数据属性中以便后续使用[^2]。
#### 使用 Flexbox 布局
对于更复杂的布局情况,推荐采用 CSS 的弹性盒子模型(Flexbox)。它允许容器内的项目自动排列以最佳方式填充可用空间。这有助于创建响应式的界面设计,即使是在不同的屏幕分辨率下也能保持良好的用户体验。
```css
.container {
display: flex;
flex-direction: column;
}
.content-area {
flex-grow: 1;
overflow-y: auto;
}
```
上述样式定义了一个垂直方向上的弹性盒容器 `.container` 和一个可滚动的内容区域 `.content-area` 。当父级元素设置了固定高度时,`.content-area` 将会占据剩余的空间并且支持内部内容超出时产生滚动条。
#### 配置 pages.json 文件中的 globalStyle 字段
除了编程手段外,还可以利用 `pages.json` 来指定一些全局性的视觉参数,如状态栏颜色、导航栏背景色等。这对于统一整个应用程序外观非常重要。
```json
{
"globalStyle": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
}
```
这段 JSON 片段说明了怎样修改 app 导航栏的颜色风格,从而增强用户的沉浸感[^1]。
阅读全文
相关推荐
















