uniapp自定義彈框的方法

更新時間：2022年08月23日 16:49:56 作者：小陳情緒員

這篇文章主要為大家詳細(xì)介紹了uniapp自定義彈框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了uniapp自定義彈框，適用所有類型，供大家參考，具體內(nèi)容如下

效果原理

利用透明頁面，點擊進入當(dāng)前頁面，內(nèi)容根據(jù)自己需求去實現(xiàn)，隨便自定義，出來的效果就是一個彈框的效果。解決的難題(原生tabbar中間按鈕的彈框，升級彈框不能遮擋原生tabbar)

創(chuàng)建一個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('條碼內(nèi)容：' + 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中間的按鈕進入此頁面，設(shè)置為透明的，當(dāng)做一個彈框，
"path": "pages/midDialog/midDialog",
?? ?"style": {
?? ??? ?"background": "transparent",
?? ??? ?"app-plus": {
?? ??? ??? ?"titleNView": false
?? ??? ?}
?? ?}

}

一般tabbar中間按鈕點擊出現(xiàn)彈框

// 這些是要寫在App.vue中onLaunch里邊
uni.onTabBarMidButtonTap(() => {
?? ?uni.navigateTo({
?? ? ? ?url: '/pages/midDialog/midDialog',
?? ? ? ?animationType: 'fade-in',
?? ? ? ?animationDuration: 200,
?? ??? ?fail(err) {
?? ??? ??? ?console.log(err)
?? ??? ?}
?? ?});
})