整体来说推荐第四种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:"none"//加上,完美解决底部留白
			})

具体实现:
新建 index.nvue【你想要的弹框组件】

<template>
		<view class="popup_con" :style="{height:windowHeight+'px',width:windowWidth+'px'}">
		<!-- </view> -->
		
		<view class="popup_contain" :style="{width:windowWidth/2+'px'}">
			<text class="popup_title">來電</text>
			<view>{{data.content}}</view>
			<view class="popup_btn">
				<text class="popup_btn1" style="color: #FFFFFF;" @click="handleAnswer">接聽</text>
				<text class="popup_btn2" @click="handleRefuse">拒絕</text>
			</view>

		</view>
		</view>
</template>

<script>
<script>

page.json

 {
			"path": "pages/popup/index",
			"style": {
				"navigationBarBackgroundColor": "#007AFF",
				"navigationBarTextStyle": "white",
				"background": "transparent", //把页面背景设置透明,默认是白色
				"animationType": "fade-in"
				}
}

app.vue(或其它页面运用)

显示:
uni.navigateTo({
				url:"../../pages/popup/index"
			})
隐藏:
uni.navigateBack({})

5. 自定义api ()

6. 全局组件 (不考虑原生组件覆盖问题的话,可用;或者用来非定位形式的公共部分实现)

7. plus.webview.create() url (暂时是个思路)
8. new plus.nativeObj.View(全局的话可能不太行,单个页面可以)
9. 插件



题外话:
谷歌工具:看txt文件有需要可私信联系我



Logo

助力广东及东莞地区开发者,代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展,成为松山湖开发者首选的工作与学习平台

更多推荐