您现在的位置是:网站首页> 编程资料编程资料

uniapp自定义弹框的方法_javascript技巧_

2023-05-24 430人已围观

简介 uniapp自定义弹框的方法_javascript技巧_

本文实例为大家分享了uniapp自定义弹框,适用所有类型,供大家参考,具体内容如下

效果原理

利用透明页面,点击进入当前页面,内容根据自己需求去实现,随便自定义,出来的效果就是一个弹框的效果。解决的难题(原生tabbar中间按钮的弹框,升级弹框不能遮挡原生tabbar)

创建一个vue页面

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

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

-六神源码网