在uniapp(App端)中实现自定义弹框,可以通过创建一个透明页面来实现。点击进入当前页面时,页面背景会变透明,用户可以根据自己的需求进行自定义,最终效果类似于弹框。
遇到问题:当打开弹窗(进入弹窗页面)就会触发当前页面的onHide函数,关闭弹窗(跳出弹窗页面)就会触发上一页的onShow函数。有时候我们在onShow、onHide函数会定义自己的逻辑处理,比如在onShow函数发请求、在onHide销毁定时器,那么当打开关闭弹窗都会触发一遍。当打开关闭弹窗避免不触发自己定义的逻辑处理,这问题怎么解决呢?
解决逻辑:
1、我们可以在vuex定义一个变量,默认为false,当打开弹窗(进入弹窗页面)之前把该变量改成true,关闭弹窗(跳出弹窗页面)之后把该变量改成false。(或者直接使用uni.getStorageSync本地存储和uni.removeStorageSync删除缓存也可以。)
2、在调用弹窗的页面的onShow、onHide函数获取到该变量,判断变量如果为true,直接结束函数。
本码使用uniapp插件的ayy-modal全局弹窗,网址:uniapp 全局弹窗 - DCloud 插件市场
vuex的store 定义一个弹窗状态和改变状态的方法
state: {
ayyModalFlag: false,
},
mutations: {
setAyyModalFlag(state, flag) {
state.ayyModalFlag = flag;
},
App.vue 把vuex的store定义在全局,方便调用
import store from "@/store"
globalData: {
store,
},
ayy-modal/ayy-modal.js 进入和跳出弹窗页面改变弹窗状态
const store = getApp().globalData.store
store.commit('setAyyModalFlag', false)
const store = getApp().globalData.store
store.commit('setAyyModalFlag', true)
在页面调用弹窗和处理打开关闭弹窗多次触发onShow和onHide函数的问题
onShow() {
// #ifdef APP
if (this.$store.state.ayyModalFlag) return
// #endif
console.log("onShow---", );
// 在这里处理你的逻辑
},
onHide() {
// #ifdef APP
if (this.$store.state.ayyModalFlag) return
// #endif
console.log("onHide===", );
// 在这里处理你的逻辑
},
methods: {
openAyyModel() {
uni.$ayyModal.show({
title: "我是标题",
content: "我是内容",
confirmFun: () => {
}
})
},
},