uni-app uni-popup内部使用自定义dom做选中状态切换时uni-popup内容区域会被transform translateY(100%)强制收起不再显示

uni-app uni-popup内部使用自定义dom做选中状态切换时uni-popup内容区域会被transform translateY(100%)强制收起不再显示

项目属性 值
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 3.99
浏览器平台 Chrome
浏览器版本 123.0.6312.106
项目创建方式 HBuilderX

示例代码：

<!-- 筛选弹窗 -->  
<uni-popup ref="filterPopup" type="bottom" :mask-click="false" :safe-area="true">  
    <view class="filter-popup">  
        <view class="popup-header">  
            <text class="popup-title">筛选条件</text>  
            <view class="popup-close" @click="closeFilterPopup">  
                <uni-icons type="clear" size="20" color="#333"></uni-icons>  
            </view>  
        </view>  

        <view class="filter-content">  
            <!-- 状态筛选 -->  
            <view class="filter-group">  
                <view class="group-title">状态</view>  
                <view class="option-list">  
                    <view   
                        class="option-item"   
                        v-for="status in statusOptions"   
                        :key="status.value"  
                        :class="{ active: filters.status === status.value }"  
                        @click.stop="selectFilter('status', status.value)"  
                    >  
                        <text>{{ status.label }}</text>  
                        <uni-icons   
                            v-if="filters.status === status.value"   
                            type="checkmarkempty"   
                            size="16"   
                            color="#007AFF"  
                        ></uni-icons>  
                    </view>  
                </view>  
            </view>  
        </view>  

        <view class="popup-footer">  
            <button class="reset-btn" @click="resetFilters">重置</button>  
            <button class="confirm-btn" @click="applyFilters">确定</button>  
        </view>  
    </view>  
</uni-popup>

操作步骤：

  • 点击状态下的类别，触发filter修改后

预期结果：

  • uni-popup的content区域不收起

实际结果：

  • uni-popup的content区域收起

bug描述：

  • 函数触发uni-popup内部dom绑定的class渲染时，content会被设置为transform: translateY(100%);导致content区域被收起

更多关于uni-app uni-popup内部使用自定义dom做选中状态切换时uni-popup内容区域会被transform translateY(100%)强制收起不再显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你好，请提供一下完整的可以运行的复现代码

更多关于uni-app uni-popup内部使用自定义dom做选中状态切换时uni-popup内容区域会被transform translateY(100%)强制收起不再显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-popup组件在H5平台上的兼容性问题。当popup内部元素状态变化触发重新渲染时，组件会错误地执行关闭动画。

问题原因： uni-popup内部的状态管理机制在检测到内容变化时，可能会误判为需要关闭弹窗，从而触发transform动画。

解决方案：

  1. 使用v-if控制渲染时机
// 在data中增加控制变量
data() {
  return {
    showFilterContent: true
  }
},
methods: {
  selectFilter(type, value) {
    // 先隐藏内容
    this.showFilterContent = false
    // 更新筛选条件
    this.filters[type] = value
    // 下一帧重新显示内容
    this.$nextTick(() => {
      this.showFilterContent = true
    })
  }
}

在模板中包裹内容区域：

<view class="filter-content" v-if="showFilterContent">
  <!-- 原有内容 -->
</view>
  1. 强制重新打开popup
methods: {
  async selectFilter(type, value) {
    this.filters[type] = value
    // 强制重新打开
    this.$refs.filterPopup.close()
    await this.$nextTick()
    this.$refs.filterPopup.open()
  }
}
  1. 使用key强制重新渲染
<uni-popup ref="filterPopup" type="bottom" :key="popupKey">
  <!-- 内容 -->
</uni-popup>

data() {
  return {
    popupKey: 0
  }
},
methods: {
  selectFilter(type, value) {
    this.filters[type] = value
    this.popupKey++ // 强制重新渲染
  }
}
回到顶部