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最后都是运行在手机上,何不直接用真机运行呢

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

相关文章

  • 深入理解Javascript作用域与变量提升

    深入理解Javascript作用域与变量提升

    这篇文章主要是对Javascript作用域与变量提升进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 详解JavaScript中ora库的使用教程

    详解JavaScript中ora库的使用教程

    使用 ora 这个 JavaScript 库可以在命令行应用程序中提供漂亮的加载状态提示,本文详细介绍如何使用该库,希望对大家有一定的帮助
    2024-02-02
  • js如何判断用户是否是用微信浏览器

    js如何判断用户是否是用微信浏览器

    微信内置浏览器屏蔽了下载链接,如果用户是用微信内置浏览器打开的,则提示用户换一个浏览器打开页面,那么该如何判断用户是否是用微信浏览器呢
    2014-06-06
  • js倒计时简单实现方法

    js倒计时简单实现方法

    这篇文章主要介绍了js倒计时简单实现方法,方便一些提示重要日期的来临,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JavaScript中Array.from()的用法总结

    JavaScript中Array.from()的用法总结

    本文主要介绍了JavaScript中Array.from()的用法总结
    2023-05-05
  • 手把手教你uniapp和小程序分包(图文)

    手把手教你uniapp和小程序分包(图文)

    本文主要介绍了手把手教你uniapp和小程序分包,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 原生js实现淘宝放大镜效果

    原生js实现淘宝放大镜效果

    这篇文章主要为大家详细介绍了原生js实现放大镜效果,制作一个类似于淘宝的放大镜效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • js实现简易的单数字随机抽奖(0-9)

    js实现简易的单数字随机抽奖(0-9)

    这篇文章主要介绍了js实现简易的单数字0-9随机抽奖,可以控制抽取随机数开始与停止,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-08-08
  • 网页右下角弹出窗体实现代码

    网页右下角弹出窗体实现代码

    右下角弹出窗体的效果在浏览网页的时候会遇到,那么它是怎么实现的呢?本文有个不错的示例,大家可以参考下
    2014-06-06
  • 解决layui的form里的元素进行动态生成,验证失效的问题

    解决layui的form里的元素进行动态生成,验证失效的问题

    今天小编就为大家分享一篇解决layui的form里的元素进行动态生成,验证失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09

最新评论