uni-app uni-popup组件在魅族自带浏览器中无法正常显示或关闭

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

uni-app uni-popup组件在魅族自带浏览器中无法正常显示或关闭

示例代码：

<template>  
    <view class="content">  
        <button @click="open">显示弹窗</button>  
        <uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">  
            <view style="background-color: #fff; width: 500rpx; height: 300rpx;">  
                底部弹出 Popup 自定义圆角  
            </view>  
        </uni-popup>  
    </view>  
</template>  

<script>  
export default {  
   methods:{  
      open(){  
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']  
        this.$refs.popup.open()  
      }  
   }  
}  
</script>

操作步骤：

  • 使用示例代码，普通调用，无任何其他操作

预期结果：

  • 正常显示和关闭，正常触发相关事件

实际结果：

  • 不能正常显示和关闭，不能正常触发相关事件

bug描述：

手机：魅族21，其他魅族机型没有，无法测试
uni-popup组件在魅族自带浏览器中无法正常显示或关闭，尤其是二次显示，其他浏览器、其他品牌机型、微信内置浏览器等测试正常
扫码浏览官方演示页面中可正常显示关闭
但是使用开发工具创建官方演示项目，依然是存在问题，不知道原因


Harmonyos Next教程
1 回复

在处理uni-app中uni-popup组件在特定浏览器（如魅族自带浏览器）中的兼容性问题时，我们首先需要确认是否是CSS样式、JavaScript事件处理或者浏览器对HTML5标准的支持差异导致的。由于uni-app基于Vue.js和小程序组件规范，大多数情况下，组件的行为是跨平台一致的，但特定浏览器的兼容性问题仍然可能出现。

以下是一个基本的uni-popup使用示例，并结合一些可能帮助解决兼容性问题的代码技巧：

<template>
  <view>
    <button @click="showPopup">显示弹窗</button>
    <uni-popup ref="myPopup" type="bottom" :mask="true" @close="handleClose">
      <view class="popup-content">
        <text>这是一个弹窗</text>
        <button @click="closePopup">关闭</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  methods: {
    showPopup() {
      this.$refs.myPopup.show();
    },
    closePopup() {
      this.$refs.myPopup.hide();
    },
    handleClose() {
      console.log('弹窗已关闭');
    }
  }
}
</script>

<style>
.popup-content {
  padding: 20px;
  background-color: #fff;
}
/* 针对魅族浏览器的CSS hack（如果已知具体差异） */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  /* 魅族浏览器特定的样式调整 */
  .uni-popup__mask {
    background-color: rgba(0, 0, 0, 0.5) !important; /* 示例：强制设置遮罩层透明度 */
  }
}
</style>

注意事项：

  1. CSS Hacks：使用CSS hacks针对特定浏览器进行样式调整。上面的示例中提供了一个针对WebKit内核浏览器的媒体查询hack，但需要根据魅族浏览器的具体CSS渲染差异来调整。

  2. JavaScript事件监听：确保所有事件监听器（如@click）都能正确触发。有时浏览器对事件的处理有差异，可能需要使用addEventListener等原生方法替代Vue的事件绑定。

  3. 条件渲染：如果问题依旧存在，考虑根据用户代理字符串判断浏览器类型，条件性地渲染不同的UI组件或使用不同的逻辑处理。

  4. 调试与测试：使用真机调试工具，直接在魅族浏览器中进行测试，观察控制台是否有错误或警告信息，这有助于定位问题。

由于无法直接访问魅族浏览器进行调试，上述建议基于常见的兼容性处理策略。实际应用中可能需要根据具体情况调整代码。

回到顶部