uni-app 使用showModal只保留一个确认按钮时无法居中

uni-app 使用showModal只保留一个确认按钮时无法居中

示例代码：

uni.showModal({  
    title: '更新提示',  
    content: '是否选择更新',  
    showCancel:false,  
    success: (showResult) => {  
        if (showResult.confirm) {  
            plus.runtime.openURL(openUrl);  
        }  
    }  
})

操作步骤：

uni.showModal({  
    title: '更新提示',  
    content: '是否选择更新',  
    showCancel:false,  
    success: (showResult) => {  
        if (showResult.confirm) {  
            plus.runtime.openURL(openUrl);  
        }  
    }  
})

预期结果：

uni.showModal({  
    title: '更新提示',  
    content: '是否选择更新',  
    showCancel:false,  
    success: (showResult) => {  
        if (showResult.confirm) {  
            plus.runtime.openURL(openUrl);  
        }  
    }  
})

实际结果：

uni.showModal({  
    title: '更新提示',  
    content: '是否选择更新',  
    showCancel:false,  
    success: (showResult) => {  
        if (showResult.confirm) {  
            plus.runtime.openURL(openUrl);  
        }  
    }  
})

bug描述：

app里面uni.showModal将showCancel设置为false只有确定按钮时 确定按钮无法居中

示例图片


更多关于uni-app 使用showModal只保留一个确认按钮时无法居中的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

系统特性 目前不支持居中

更多关于uni-app 使用showModal只保留一个确认按钮时无法居中的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的。。。。你说的都对

回复 囿于江湖: -_-！

这是uni-app的showModal组件在部分平台上的样式限制问题。当只显示单个按钮时，原生模态框的默认样式会导致按钮无法居中。

解决方案有以下几种：

  1. 使用自定义弹窗替代：
uni.showToast({
  title: '更新提示',
  icon: 'none',
  duration: 2000
})
  1. 使用条件判断强制显示两个按钮：
uni.showModal({
  title: '更新提示',
  content: '是否选择更新',
  showCancel: true,
  cancelText: ' ', // 空字符串或空格
  confirmText: '确定',
  success: (res) => {
    if(res.confirm){
      plus.runtime.openURL(openUrl);
    }
  }
})
  1. 使用CSS覆盖样式（H5端有效）：
/* 在App.vue的style中 */
.uni-modal__btn_primary {
  margin: 0 auto !important;
}
回到顶部