做彩票网站多少钱,做公司网站员工保险,学生为学校做网站,专业团队照片在uniapp(App端)中实现自定义弹框#xff0c;可以通过创建一个透明页面来实现。点击进入当前页面时#xff0c;页面背景会变透明#xff0c;用户可以根据自己的需求进行自定义#xff0c;最终效果类似于弹框。
遇到问题#xff1a;当打开弹窗(进入弹窗页面)就会触发当前页…在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 /storeglobalData: {store,}, ayy-modal/ayy-modal.js 进入和跳出弹窗页面改变弹窗状态 const store getApp().globalData.storestore.commit(setAyyModalFlag, false)const store getApp().globalData.storestore.commit(setAyyModalFlag, true)
在页面调用弹窗和处理打开关闭弹窗多次触发onShow和onHide函数的问题 onShow() {// #ifdef APPif (this.$store.state.ayyModalFlag) return// #endifconsole.log(onShow---, );// 在这里处理你的逻辑},onHide() {// #ifdef APPif (this.$store.state.ayyModalFlag) return// #endifconsole.log(onHide, );// 在这里处理你的逻辑},methods: {openAyyModel() {uni.$ayyModal.show({title: 我是标题,content: 我是内容,confirmFun: () {}})},},
