uniapp全局弹窗自定义uni.showModal思路总结

本文总结了uniapp全局弹窗的多种实现方式,重点推荐使用nvue进行实现,虽然存在ipad横屏底部留白的问题,但通过特定方法可以解决。其他方案包括在公共顶部导航栏组件中加入弹窗组件、自定义API、全局组件等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

整体来说推荐第四种nvue实现;
1.(适用于web,app不行)↓↓

// import PublicPopup from "@/pages/popup/PublicPopup.vue"
// import gloPopup from "@/utils/gloPopup.js"

Vue.use(uView);
 Vue.use(gloPopup)

Vue.config.productionTip = false

 let componetsBox= Vue.component('public-popup',PublicPopup)


App.mpType = 'app'

const app = new Vue({
    ...App,
	store
})
app.$mount()

//在 app.$mount()下添加
document.body.appendChild(new componetsBox().$mount().$el)

2. subnvue

  1. 每个页面都有顶部导航栏,直接在公共顶部导航栏组件中加入弹窗组件 (还没有试过,算个思路)

4. 例子nvue实现(推荐!!!app√)
缺点:ipad上横屏底部留白
留白问题解决

在跳转时:
uni.navigateTo({
				url: "../popup/index",
				animationType:"n
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值