弹框问题

/components/free-ui/free-nav-bar.vue

<template><view><view :class="getClass"><!-- 状态栏 --><view :style="'height:'+statusBarHeight+'px'"></view><!-- 导航 --><view class="w-100 flex align-center justify-between" style="height: 90rpx;"><!-- 左边 --><view class="flex align-center"><!-- 返回按钮 --><!-- #ifndef MP --><free-icon-button v-if="showBack" @click="back"><text class="iconfont font-md">&#xe60d;</text></free-icon-button><!-- #endif --><!-- 标题 --><slot><text v-if="title" class="font-md ml-3">{{getTitle}}</text></slot></view><!-- 右边 --><view class="flex align-center" v-if="showRight"><slot name="right"><free-icon-button @click="search"><text class="iconfont font-md">&#xe6e3;</text></free-icon-button><free-icon-button @click="openExtend"><text class="iconfont font-md">&#xe682;</text></free-icon-button></slot></view></view></view><!-- 占位 --><view v-if="fixed" :style="fixedStyle"></view><!-- 扩展菜单 --><free-popup v-if="showRight" ref="extend" :bodyWidth="320" :bodyHeight="525"bodyBgColor="bg-dark" transformOrigin="right top"><view class="flex flex-column" style="width: 320rpx;height: 525rpx;"><view class="flex-1 flex align-center" hover-class="bg-hover-dark"v-for="(item,index) in menus":key="index"@click="clickEvent(item)"><text class="iconfont pl-3 pr-2 font-md text-white">{{item.icon}}</text><text class="font-md text-white">{{item.name}}</text></view></view></free-popup></view>
</template><script>import freeIconButton from "./free-icon-button.vue"import freePopup from "./free-popup.vue"export default {props: {showBack:{type:Boolean,default:false},backEvent:{type:Boolean,default:true},title: {type: [String,Boolean],default:false },fixed:{type:Boolean,default:true},noreadnum:{type:[Number,String],default:0},bgColor:{type:String,default:"bg-light"},showRight:{type:Boolean,default:true}},components:{freeIconButton,freePopup},data() {return {statusBarHeight:0,navBarHeight:0,menus:[{name:"发起群聊",event:"navigateTo",path:"/pages/mail/mail/mail?type=createGroup",icon:"\ue633"},{name:"添加好友",event:"navigateTo",path:"/pages/common/search/search",icon:"\ue65d"},// #ifndef H5{name:"扫一扫",event:"",icon:"\ue614"},// #endif{name:"收付款",event:"",icon:"\ue66c"},{name:"帮助与反馈",event:"",icon:"\ue66c"}],}},mounted() {// #ifdef APP-PLUS-NVUEthis.statusBarHeight = plus.navigator.getStatusbarHeight()// #endifthis.navBarHeight = this.statusBarHeight + uni.upx2px(90)},computed: {fixedStyle() {return `height:${this.navBarHeight}px`},getTitle(){let noreadnum = this.noreadnum > 0 ? '('+this.noreadnum+')' : ''return this.title + noreadnum},getClass(){let fixed = this.fixed?'fixed-top':''return `${fixed} ${this.bgColor}` }},methods: {openExtend() {this.$refs.extend.show(uni.upx2px(415),uni.upx2px(150))},// 返回back(){if(this.backEvent){return uni.navigateBack({delta: 1});}this.$emit('back')},search(){uni.navigateTo({url: '/pages/common/search/search'});},clickEvent(item){this.$refs.extend.hide()switch (item.event){case 'navigateTo':uni.navigateTo({url: item.path,});break;default:uni.showToast({title: '靓仔，自己发挥',icon: 'none'});break;}}},}
</script><style>
</style>

感谢大家观看，我们下次见

uni-app 188修复弹框问题相关推荐

仿招商银行APP指纹识别弹框
仿招商银行APP指纹识别弹框 @Author GQ 2018年06月29日调用硬件指纹识别功能效果图验证是否有指纹识别模块权限 <uses-permission android:name ...
android APP隐私政策弹框的实现代码实例
android APP隐私政策弹框的实现代码实例步骤一:在assets目录下放置隐私政策的文本文件,比如privacy.txt 步骤二:在drawable目录下放置圆角弹出框演示: <?xml ...
app android 升级提示,app版本升级原生弹框和进度提示(包含wgt升级)
更新记录 1.46(2021-03-09) 1.可修改下载提示文字; 2.可修改下载提示按钮文字; 1.45(2021-01-26) 1.修复了android自定义图片,某些图片底部出现黑线的问题查 ...
uniapp uni.showModal全局弹框中跳转页面问题
uni.showModal可以全局弹框提醒,如果说在弹框后,点击按钮进行页面跳转的话,需要将跳转页面路径写成绝对路径,否则无法正常跳转. uni.showModal({title: '视频调度',co ...
android自动化测试弹框,干货 | App 自动化测试痛点（弹框及首页启动加载完成判断处理）...
原标题:干货 | App 自动化测试痛点(弹框及首页启动加载完成判断处理) 1. 常见痛点 App 自动化测试中有些常见痛点问题,如果框架不能很好的处理,就可能出现元素定位超时找不到的情况,自动化也就 ...
淘宝3.25弹框技术分析，不只是程序员的事
点击蓝色关注,回复"职级"获取知名互联网公司职级定义每月开展上个月读者阅读.转发.在看.留言各前三名(冠.亚.季军)评选活动,次月初开奖!欢迎参加,有惊喜. 两周前的3月25日, ...
uniapp自定义弹框
uniapp自定义弹框,适用所有类型效果原理创建一个vue页面 pages.json配置一般tabbar中间按钮点击出现弹框注意事项效果原理利用透明页面,点击进入当前页面,内容根据自己需求 ...
app启动页数秒加载代码_干货 | App 自动化测试痛点（弹框及首页启动加载完成判断处理）
1. 常见痛点 App 自动化测试中有些常见痛点问题,如果框架不能很好的处理,就可能出现元素定位超时找不到的情况,自动化也就被打断终止了.很容易打消做自动化的热情,导致从入门到放弃.比如下面的两个问题 ...
如何实现接口统一入口_网易考拉Android App如何实现统一弹框
摘要在快速开发的背景下,经历了n个版本后的考拉Android App中已经存在了各种各样看似相同却各有差别的弹框样式.其中包括系统弹框和自定义弹框,并且在线上时常会出现IllegalArgument ...

uni-app 188修复弹框问题

弹框问题

/components/free-ui/free-nav-bar.vue

uni-app 188修复弹框问题相关推荐

最新文章

热门文章