效果原理
利用透明页面，点击进入当前页面，内容根据自己需求去实现，随便自定义，出来的效果就是一个弹框的效果。解决的难题(原生tabbar中间按钮的弹框，升级弹框不能遮挡原生tabbar)
创建一个vue页面
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<template> <view @click="close()" class="mask"> <view class="content"> <view class="" @click.stop="doScanCode">点击扫码</view> <view class="" @click.stop="doDialog">点击弹出</view> </view> </view> </template>
<script> export default { data() { return {
} }, methods: { close() { uni.navigateBack() }, doDialog() { uni.showModal({ title:'uniapp弹框' }) }, doScanCode() { uni.scanCode({ success: function(res) { console.log('条码类型：' + res.scanType); console.log('条码内容：' + res.result); uni.navigateTo({ url:'../scancode/scancode' }) } }); } } } </script>
<style> page { background: transparent; }
.mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; /* #ifndef APP-NVUE */ display: flex; /* #endif */ justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.4); }
.content { width: 200px; height: 200px; background-color: #007AFF; /* margin-bottom: 140upx; */ display: flex; justify-content: space-between; align-items: center; } </style> |
pages.json配置
|
1 2 3 4 5 6 7 8 9 10 |
{// 点击tabbar中间的按钮进入此页面，设置为透明的，当做一个弹框， "path": "pages/midDialog/midDialog", "style": { "background": "transparent", "app-plus": { "titleNView": false } }
} |
一般tabbar中间按钮点击出现弹框
|
1 2 3 4 5 6 7 8 9 10 11 |
// 这些是要写在App.vue中onLaunch里边 uni.onTabBarMidButtonTap(() => { uni.navigateTo({ url: '/pages/midDialog/midDialog', animationType: 'fade-in', animationDuration: 200, fail(err) { console.log(err) } }); }) |
注意事项
在真机运行下测试，在模拟器中，由于模拟器性能不完善，导致透明效果有时会失败，反正app最后都是运行在手机上，何不直接用真机运行呢
