uni.showModal样式调整
时间: 2025-01-17 13:02:27 浏览: 292
### 修改 `uni.showModal` 的样式
为了自定义或修改 UniApp 中 `uni.showModal` 的显示效果,可以通过全局样式文件来覆盖默认样式。具体做法是在项目的 `common/style.scss` 文件中定义新的样式类[^1]。
```scss
.uni-modal {
.uni-modal__bd {
color: blue;
font-size: 32rpx;
font-weight: bold;
padding: 64rpx 0;
}
}
```
这段代码会改变模态框内文本的颜色、字体大小、粗细以及上下边距。需要注意的是,这些更改会影响整个应用中的所有 `uni.showModal` 实例。
如果希望进一步控制弹窗的具体属性,比如导航栏颜色或其他视觉特性,则可以在页面配置文件 `page.json` 中指定特定路径下的样式设置[^2]:
```json
{
"path": "pages/popup/index",
"style": {
"navigationBarBackgroundColor": "#007AFF",
"navigationBarTextStyle": "white",
"background": "transparent",
"animationType": "fade-in"
}
}
```
对于更复杂的定制需求,例如限制 modal-body 高度为视口的80%,可以考虑创建一个新的 CSS 类并应用于该部分[^3]:
```scss
.custom-height {
max-height: 80vh !important; /* 使用 vh 单位表示相对于视口高度 */
overflow-y: auto; /* 如果内容超出容器则允许滚动 */
}
```
最后,在调用 `uni.showModal()` 方法时传递此新类名作为参数之一:
```javascript
uni.showModal({
title: '提示',
content: '<div class="custom-height">这里是你想要展示的内容。</div>',
success(res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
},
});
```
上述方法能够有效地实现对 `uni.showModal` 外观和行为上的个性化调整。
阅读全文
相关推荐


















