uni-app uni-popup组件打包成H5页面在ios13以下系统无法打开弹窗

发布于 1周前 作者 vueper 来自 Uni-App

uni-app uni-popup组件打包成H5页面在ios13以下系统无法打开弹窗

示例代码：

<template>  
    <view>  
        <button @click="open">打开弹窗</button>  
        <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup>  
    </view>  
</template>  
<script>  
export default {  
   methods:{  
      open(){  
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']  
        this.$refs.popup.open('top')  
      }  
   }  
}  
</script>

操作步骤：

在页面中使用uni-popup组件，编译或者打包为H5页面，在ios12的手机的safari或者微信内置浏览器打开

预期结果：

弹窗能正常打开

实际结果：

在ios12的手机的safari或者微信内置浏览器中，弹窗不能正常打开，在ios13以上手机可以打开

bug描述：

uni-popup组件打包成H5页面在ios13以下的系统打不开弹窗


Harmonyos Next教程
1 回复

在针对uni-app中的uni-popup组件在iOS 13以下系统打包成H5页面无法打开弹窗的问题时，通常这类问题可能涉及兼容性问题或者组件的某些特性不被老旧浏览器支持。为了尽可能绕过这些问题，你可以尝试以下几种方法，这里我将通过代码示例来展示一些可能的解决方案。

1. 使用基础HTML/CSS/JS实现弹窗

考虑到uni-popup组件可能存在兼容性问题，你可以尝试使用纯HTML、CSS和JavaScript来实现一个简单的弹窗。这种方法通常具有较好的兼容性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Popup</title>
    <style>
        #popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            border: 1px solid #ccc;
            padding: 20px;
            z-index: 1000;
        }
        #overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
    </style>
</head>
<body>
    <button onclick="showPopup()">Show Popup</button>
    <div id="overlay" onclick="hidePopup()"></div>
    <div id="popup" onclick="event.stopPropagation(); hidePopupIfClickedOutside(event)">
        <p>This is a custom popup!</p>
        <button onclick="hidePopup()">Close</button>
    </div>

    <script>
        function showPopup() {
            document.getElementById('popup').style.display = 'block';
            document.getElementById('overlay').style.display = 'block';
        }

        function hidePopup() {
            document.getElementById('popup').style.display = 'none';
            document.getElementById('overlay').style.display = 'none';
        }

        function hidePopupIfClickedOutside(event) {
            var popup = document.getElementById('popup');
            if (!popup.contains(event.target)) {
                hidePopup();
            }
        }
    </script>
</body>
</html>

2. 条件渲染与降级处理

在uni-app中，你可以根据用户的浏览器环境来决定是否使用uni-popup组件。例如，通过navigator.userAgent检测iOS版本，如果版本低于13，则使用上述自定义弹窗。

if (/iPhone\sOS\s(1[0-2])_/i.test(navigator.userAgent)) {
    // Use custom popup logic here
} else {
    // Use uni-popup component here
}

这种方法结合了uni-app的灵活性和原生HTML/CSS/JS的兼容性，能够在不牺牲功能的前提下，提高应用的兼容性。

回到顶部