uniapp自定义弹框的方法

 更新时间:2022年08月23日 16:49:56   作者:小陈情绪员  
这篇文章主要为大家详细介绍了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最后都是运行在手机上,何不直接用真机运行呢

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 关于Ajax的原理以及代码封装详解

    关于Ajax的原理以及代码封装详解

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),相信大家对ajax都很熟悉,下面这篇文章主要给大家介绍了关于Ajax原理以及代码封装的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • canvas实现绘制吃豆鱼效果

    canvas实现绘制吃豆鱼效果

    本篇文章主要分享了canvas实现绘制吃豆鱼效果的示例代码,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 一文带你探索JavaScript中斜杠的神秘世界

    一文带你探索JavaScript中斜杠的神秘世界

    斜杠可以在代码中拥有多种含义,所以在 JavaScript 编程中,处理斜杠是一项非常重要的任务,本文就来带大家一起来看看JavaScript是如何处理斜杠的
    2023-06-06
  • js中的闭包实例展示

    js中的闭包实例展示

    闭包是js中的一大特色,也是一大难点。下面这篇文章主要给大家介绍了关于js中闭包的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起看看吧
    2018-11-11
  • 让你一句话理解闭包(简单易懂)

    让你一句话理解闭包(简单易懂)

    下面小编就为大家带来一篇一句话理解闭包(简单易懂)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • Web网站都变成灰色有哪些方法可以快速实现(解决方案)

    Web网站都变成灰色有哪些方法可以快速实现(解决方案)

    有些时候我们需要把网站页面变成黑白色或灰色,特别是对于一些需要悼念的日子,以及一些影响力很大的伟人逝世或纪念日的时候,都会让网站的全部网页变成灰色(黑白色),以表示我们对逝者或者英雄的缅怀和悼念
    2022-12-12
  • js获取单元格自定义属性值的代码(IE/Firefox)

    js获取单元格自定义属性值的代码(IE/Firefox)

    js取单元格自定义属性值,IE和FF下的不同实现
    2010-04-04
  • js当一个变量为函数时 应该注意的一点细节小结

    js当一个变量为函数时 应该注意的一点细节小结

    变量testFun为一个匿名函数,匿名函数返回的一个testFun.init对象(也是一个匿名函数)
    2011-12-12
  • 使用微信小程序显示用户当前地理位置的详细代码

    使用微信小程序显示用户当前地理位置的详细代码

    这篇文章主要介绍了使用微信小程序显示用户当前地理位置的详细代码,在微信小程序的开发中不可避免的会遇到需要显示用户地理位置的操作,本文将简单介绍如何在微信小程序中显示用户当前的地理位置,需要的朋友可以参考下
    2022-06-06
  • JavaScript 异步时序问题

    JavaScript 异步时序问题

    这篇文章主要介绍了JavaScript 异步时序问题,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-11-11

最新评论