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
补充:后来发现调用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-app
中 uni-swipe-action
组件点击后导致 uni-popup
组件闪烁并消失的问题,这通常可能是由于事件处理不当或组件间的交互冲突引起的。以下是一个简化的代码示例,展示如何正确配置和使用这两个组件,以及如何通过代码来避免潜在的闪烁和消失问题。
首先,确保你的 uni-app
项目已经正确引入了 uni-swipe-action
和 uni-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>
说明
- 事件处理:在
uni-swipe-action
组件上绑定action
事件,当触发时,设置isPopupVisible
为true
以显示uni-popup
。 - 避免闪烁:使用
$nextTick
确保在 DOM 更新完成后调用updatePosition
方法,这有助于避免组件闪烁。虽然uni-popup
通常会自动调整位置,但在某些情况下手动调用updatePosition
可以解决问题。 - 关闭弹窗:在弹窗内部添加一个按钮,点击后设置
isPopupVisible
为false
以关闭弹窗。
确保你的 uni-app
和相关依赖库(如 uni-ui
)都更新到最新版本,以避免已知的bug。如果问题仍然存在,建议检查控制台是否有错误信息,或者查看 uni-app
和 uni-ui
的官方文档和社区,看是否有其他开发者遇到并解决了类似的问题。