当前位置: 首页 > news >正文

uniapp的扩展组件uni-popup 弹出层自动打开

我的需求是在页面加载完之后自动打开弹窗,自动打开只能写在onReady 或 mounted 生命周期内,这是这个组件的规定:

  • 如果想在页面渲染完毕后就打开 uni-popup ,请在 onReady 或 mounted 生命周期内调用,确保组件渲染完毕,

但我需要在onShow()生命周期函数内判断用户是否已登录,已登录之后再去让弹窗自动打开,直接写在已登录后面会提示报错,弹窗打不开,打不开的原因是此时页面还未加载完,那么页面加载完之后再去执行弹窗打开语句就可以了,用一次性定时器加一点延迟,在定时器里面再执行弹窗打开的方法就不会报错了,我设了5毫秒之后,弹窗出现的效果也看不出多大区别。主要代码如下:

<!--订阅消息弹窗-->
<uni-popup ref="popupdingyue" type="center" :animation="false" :mask-click="false" mask-background-color="rgba(0,0,0,0.6)"><view class="tcbox">我是弹窗</view>
</uni-popup>
<!-- 弹窗结束位置 -->onShow(){let that=this//判断用户是否登录let loginphone= uni.getStorageSync('loginphone');console.log("首页从缓存读取的loginphone",loginphone)if(!loginphone){console.log("loginphone为空跳到登录页面")uni.redirectTo({url:"../login/login",})}else{setTimeout(function(){that.$refs.popupdingyue.open() //打开提示弹窗},5) //5毫秒之后执行这个方法,只执行一次}},

相关文章:

  • python学习笔记-内置异常
  • CMS垃圾回收器
  • Kotlin:协程基础
  • Leetcoder Day25| 回溯part05:子集+排列
  • 大概了解一下G1收集器
  • Redis 学习笔记 3:黑马点评
  • 服务器部署java 的docker项目,以及常用的一些命令
  • 可视化图文报表
  • Python爬虫进阶:爬取在线电视剧信息与高级检索
  • 【论文阅读】基于图像处理和卷积神经网络的板式换热器气泡识别与跟踪
  • iOS高级理论:分类和扩展
  • 多微服务合并为一个服务
  • 如何在debian上实现一键恢复操作系统?
  • 在IDEA中创建vue hello-world项目
  • Chapter 10 Basic Magnetics Theory
  • 【node学习】协程
  • Angular数据绑定机制
  • Idea+maven+scala构建包并在spark on yarn 运行
  • leetcode-27. Remove Element
  • Material Design
  • React16时代,该用什么姿势写 React ?
  • vue的全局变量和全局拦截请求器
  • postgresql行列转换函数
  • raise 与 raise ... from 的区别
  • ​软考-高级-系统架构设计师教程(清华第2版)【第9章 软件可靠性基础知识(P320~344)-思维导图】​
  • # Swust 12th acm 邀请赛# [ K ] 三角形判定 [题解]
  • #pragma预处理命令
  • #Z0458. 树的中心2
  • (02)Hive SQL编译成MapReduce任务的过程
  • (1)Map集合 (2)异常机制 (3)File类 (4)I/O流
  • (C#)获取字符编码的类
  • (Java岗)秋招打卡!一本学历拿下美团、阿里、快手、米哈游offer
  • (rabbitmq的高级特性)消息可靠性
  • (附源码)node.js知识分享网站 毕业设计 202038
  • (附源码)计算机毕业设计大学生兼职系统
  • (利用IDEA+Maven)定制属于自己的jar包
  • (原創) 如何優化ThinkPad X61開機速度? (NB) (ThinkPad) (X61) (OS) (Windows)
  • (转)Android学习系列(31)--App自动化之使用Ant编译项目多渠道打包
  • .Net Core与存储过程(一)
  • .net中我喜欢的两种验证码
  • .net专家(高海东的专栏)
  • .vollhavhelp-V-XXXXXXXX勒索病毒的最新威胁:如何恢复您的数据?
  • @ 代码随想录算法训练营第8周(C语言)|Day57(动态规划)
  • @GetMapping和@RequestMapping的区别
  • @LoadBalanced 和 @RefreshScope 同时使用,负载均衡失效分析
  • [ vulhub漏洞复现篇 ] Jetty WEB-INF 文件读取复现CVE-2021-34429
  • [1]-基于图搜索的路径规划基础
  • [20150629]简单的加密连接.txt
  • [23] 4K4D: Real-Time 4D View Synthesis at 4K Resolution
  • [2669]2-2 Time类的定义
  • [AutoSar]状态管理(五)Dcm与BswM、EcuM的复位实现
  • [CLR via C#]11. 事件
  • [CTO札记]如何测试用户接受度?
  • [C语言]——柔性数组
  • [GN] Vue3快速上手1