整体来说推荐第四种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)
- 每个页面都有顶部导航栏,直接在公共顶部导航栏组件中加入弹窗组件 (还没有试过,算个思路)
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文件有需要可私信联系我