uni-app uni.showModal 弹出框 滑屏也能关闭
uni-app uni.showModal 弹出框 滑屏也能关闭
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win10 | HBuilderX |
产品分类：uniapp/App
PC开发环境操作系统：Windows
PC开发环境操作系统版本号：win10
HBuilderX类型：正式
HBuilderX版本号：2.9.3
手机系统：Android
手机系统版本号：Android 10
手机厂商：小米
手机机型：小米 10 pro
页面类型：nvue
打包方式：云端
示例代码：
//#ifdef APP-PLUS
uni.request({
method: 'GET',
url: config.baseUrl + '/api/v1/version',
}).then(data => {
var [error, res] = data
if(res.data.code === 1) {
let version = res.data.data.version.split('.').join('')
let appVersion = plus.runtime.version.split('.').join('')
console.log(version, appVersion)
if(parseInt(version) <= parseInt(appVersion)) {
return
}
uni.showModal({
title: '版本更新：' + res.data.data.version,
content: res.data.data.desc,
confirmText: "更新",
showCancel: res.data.data.status === 0,
success: function(e) {
if (e.confirm || res.data.data.status === 1) {
if (plus.os.name.toLowerCase() == 'ios') {
// ios 更新
plus.runtime.openURL(res.data.data.url)
}else {
var dtask = plus.downloader.createDownload(
res.data.data.url, {},
function(d, status) {
uni.showToast({
title: '下载完成',
mask: false,
duration: 1000
})
if (status == 200) {
plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, e => e, function(error) {
uni.showToast({
title: '安装失败-01',
icon: 'none',
mask: false,
duration: 1500
})
})
} else {
uni.showToast({
title: '更新失败-02',
icon: 'none',
mask: false,
duration: 1500
})
}
})
try {
dtask.start() // 开启下载的任务
var prg = 0
var showLoading = plus.nativeUI.showWaiting("正在下载")
dtask.addEventListener('statechanged', function(task, status) {
switch (task.state) {
case 1:
showLoading.setTitle('正在下载');
break;
case 2:
showLoading.setTitle('已连接到服务器');
break;
case 3:
prg = parseInt((parseFloat(task.downloadedSize) /parseFloat(task.totalSize)) *100);
showLoading.setTitle(' 正在下载' + prg + '% ')
break;
case 4:
plus.nativeUI.closeWaiting()
//下载完成
break
}
})
}catch (err) {
plus.nativeUI.closeWaiting()
uni.showToast({
title: '更新失败-03',
icon: 'none',
mask: false,
duration: 1500
})
}
}
}
}
})
}else {
uni.showToast({
title: res.data.message,
icon: 'none'
})
}
})
//#endif
更多关于uni-app uni.showModal 弹出框 滑屏也能关闭的实战教程也可以访问 https://www.itying.com/category-93-b0.html
3 回复
在uni-app中，uni.showModal默认情况下确实可以通过滑动手势关闭，这是系统的默认行为。如果你希望禁止滑动关闭模态框，可以尝试以下解决方案：
- 对于Android平台，可以尝试在manifest.json中配置：
"app-plus": {
"popGesture": "none"
}
- 对于iOS平台，可以考虑使用plus.nativeUI的alert方法替代：
plus.nativeUI.alert(message, function(){
// 确认回调
}, title, buttonText);
- 如果必须使用showModal且需要禁用滑动关闭，可以考虑自定义模态框组件，通过条件渲染实现：
<view v-if="showCustomModal" class="modal-mask">
<view class="modal-content">
<!-- 自定义模态框内容 -->
</view>
</view>