uni-app 排坑

stpzhf2025-05-23 14:50

记录代码中遇到的一些问题的解决方案

1.自定义弹框点击弹框以外地方关闭弹框

2.拦截uni-app的tabbar跳转

1.自定义弹框点击弹框以外地方关闭弹框

复制代码

1.声明一个变量
const isDialog = ref(false)
2.在根容器里面声明一个蒙版
<view class="network-list-wrapper"  v-if="isDialog" @touchmove.stop.prevent="()=>{}" @click.stop="onToggle"></view>
3.点击按钮弹出自定义蒙版
<button @click="onToggle">点击</button>
<view class="dialog-list" v-if="isDialog">
	<text>弹框内容</text>
</view>


4.js 方法
const onToggle = () => {
    isDialog.value = !isDialog.value
}

以上就是实现思路 弹框与蒙层一起展示 只要弹框层级 > 蒙层的层级

2.拦截uni-app的tabbar跳转

复制代码

// tabbar页面跳转前进行拦截
uni.addInterceptor('switchTab', {
	invoke(e) {
                let flag = false
                if(flag) {
                    return false
		} else {
                    return true
		}
	},
	success(e) {
		console.log(e)
	},
	fail(err){
	    console.log(err)
	}
})