uni-app 【报Bug】h5 vue2 uni-swipe-action组件点击后,uni-popup组件闪烁并消失

uni-app 【报Bug】h5 vue2 uni-swipe-action组件点击后,uni-popup组件闪烁并消失

开发环境 版本号 项目创建方式
Windows HBuilderX

产品分类:uniapp/H5

浏览器平台:Edge

浏览器版本:版本 122.0.2365.52 (正式版本) (64 位)


操作步骤:

  • 左滑点击确定或者取消

预期结果:

  • popup组件应该展现

实际结果:

  • popup闪烁一下消失

bug描述:

//父组件  
<template>  
    <view class="container">  
        <uni-swipe-action>  
            <uni-swipe-action-item  
                :right-options="options2"  
                :auto-close="true"  
                @click="bindClick"  
            >  
                <view class="content-box">  
                    <text class="content-text">使用变量控制SwipeAction的开启状态</text>  
                </view>  
            </uni-swipe-action-item>  
        </uni-swipe-action>  
        <Add ref="addDom"></Add>  
    </view>  
</template>  

<script>  
import Add from "./add.vue"  
export default {  
    components: {  
        Add  
    },  
    data() {  
        return {  
            options2: [{  
                    text: '取消',  
                    style: {  
                        backgroundColor: '#007aff'  
                    }  
                },  
                {  
                    text: '确认',  
                    style: {  
                        backgroundColor: '#F56C6C'  
                    }  
                }  
            ],  
        };  
    },  
    onReady() {  
        // 模拟延迟赋值  
    },  
    methods: {  
        bindClick(e) {  
            console.log(e);  
            this.$refs.addDom.open()  
        },  
    }  
};  
</script>  

//子组件  
<template>  
    <uni-popup ref="popup" background-color="#fff" type="bottom" class="sss" backgroundColor="transparent">  
        <view class="popup-content">  

        </view>  
    </uni-popup>  
</template>  

<script>  
export default {  
    methods: {  
        open(params) {  
            this.$refs.popup.open()  
        },  
    }  
}  
</script>

更多关于uni-app 【报Bug】h5 vue2 uni-swipe-action组件点击后,uni-popup组件闪烁并消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

补充:后来发现调用open方法的时间,加个延时器就好了 setTimeout(() => {
this.$refs.addDom.open()
}, 100)

更多关于uni-app 【报Bug】h5 vue2 uni-swipe-action组件点击后,uni-popup组件闪烁并消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


解决了我在MAP上弹出popup闪现的问题,谢谢

app不会,h5会,本来想加个平台区分,就看到你这个,厉害

针对你提到的 uni-appuni-swipe-action 组件点击后导致 uni-popup 组件闪烁并消失的问题,这通常可能是由于事件处理不当或组件间的交互冲突引起的。以下是一个简化的代码示例,展示如何正确配置和使用这两个组件,以及如何通过代码来避免潜在的闪烁和消失问题。

首先,确保你的 uni-app 项目已经正确引入了 uni-swipe-actionuni-popup 组件。

页面模板(pages/index/index.vue

<template>
  <view>
    <uni-swipe-action @action="handleSwipeAction">
      <view class="swipe-item">Swipe Me</view>
    </uni-swipe-action>
    <uni-popup ref="popup" type="bottom" :show="isPopupVisible">
      <view class="popup-content">
        Popup Content
        <button @click="closePopup">Close</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isPopupVisible: false
    };
  },
  methods: {
    handleSwipeAction() {
      this.isPopupVisible = true;
      // Ensure the popup is shown after a small delay to avoid flicker
      this.$nextTick(() => {
        this.$refs.popup.updatePosition();
      });
    },
    closePopup() {
      this.isPopupVisible = false;
    }
  }
};
</script>

<style>
.swipe-item {
  width: 100%;
  height: 100px;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
}
.popup-content {
  padding: 20px;
}
</style>

说明

  1. 事件处理:在 uni-swipe-action 组件上绑定 action 事件,当触发时,设置 isPopupVisibletrue 以显示 uni-popup
  2. 避免闪烁:使用 $nextTick 确保在 DOM 更新完成后调用 updatePosition 方法,这有助于避免组件闪烁。虽然 uni-popup 通常会自动调整位置,但在某些情况下手动调用 updatePosition 可以解决问题。
  3. 关闭弹窗:在弹窗内部添加一个按钮,点击后设置 isPopupVisiblefalse 以关闭弹窗。

确保你的 uni-app 和相关依赖库(如 uni-ui)都更新到最新版本,以避免已知的bug。如果问题仍然存在,建议检查控制台是否有错误信息,或者查看 uni-appuni-ui 的官方文档和社区,看是否有其他开发者遇到并解决了类似的问题。

回到顶部