uniapp自定義彈框的方法
本文實例為大傢分享瞭uniapp自定義彈框，適用所有類型，供大傢參考，具體內容如下
效果原理
利用透明頁面，點擊進入當前頁面，內容根據自己需求去實現，隨便自定義，出來的效果就是一個彈框的效果。解決的難題(原生tabbar中間按鈕的彈框，升級彈框不能遮擋原生tabbar)
創建一個vue頁面
<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配置
{// 點擊tabbar中間的按鈕進入此頁面，設置為透明的，當做一個彈框，
"path": "pages/midDialog/midDialog",
"style": {
"background": "transparent",
"app-plus": {
"titleNView": false
}
}
}
一般tabbar中間按鈕點擊出現彈框
// 這些是要寫在App.vue中onLaunch裡邊
uni.onTabBarMidButtonTap(() => {
uni.navigateTo({
url: '/pages/midDialog/midDialog',
animationType: 'fade-in',
animationDuration: 200,
fail(err) {
console.log(err)
}
});
})
註意事項
在真機運行下測試，在模擬器中，由於模擬器性能不完善，導致透明效果有時會失敗，反正app最後都是運行在手機上，何不直接用真機運行呢
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。