layui 弹框 关闭刷新 window 双层父子弹窗交互

这篇博客介绍了layui弹层组件的弹窗之美,并着重讨论了如何实现iframe窗的弹出与关闭,特别是在处理父子弹窗交互时的关键代码,帮助开发者解决在实际使用中遇到的难题。

弹层之美

在线调试 扩展皮肤
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。

在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer(已被6174983人次关注)。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。

直到今天 我才了解了它 看懂了弹层之美 开玩笑 哈哈哈, 说实话官方文档 太坑人 入门级的代码实例少之又少!社区更是垃圾 一群键盘侠 只提供所谓的 思路 !

直入正题

<!-- layui切换弹框 -->
    <div class="topFooter">
        <a onclick="goregisterzc()" class="fl"&g
// 主程序入口 auto.waitFor(); main(); // 全局变量 let floatyButton = null; // 悬浮按钮 let floatyWindow = null; // 全屏悬浮窗 let clickCount = 0; // 点击计数器 let lastClickTime = 0; // 上次点击时间 let volumeKeyListener = null; // 音量键监听器 function main() { // 检查并请求权限 if (!requestPermissions()) { toast("请授予必要的权限"); exit(); } // 创建悬浮按钮 createFloatyButton(); // 注册音量键监听 registerVolumeKeyListener(); } // 请求必要权限 function requestPermissions() { // 检查无障碍服务 if (!auto.service) { toast("请先开启无障碍服务"); auto.waitFor(); return false; } // 在Auto.js 6.x中,悬浮窗权限检查方式不同 // 尝试创建悬浮窗来检测权限 try { let testWindow = floaty.rawWindow(<frame></frame>); testWindow.close(); return true; } catch (e) { // 如果没有权限,提示用户 toast("请授予悬浮窗权限"); // 在Auto.js 6.x中,需要手动在设置中开启悬浮窗权限 alert("权限提示", "请在设置中为Auto.js开启悬浮窗权限"); return false; } } // 创建悬浮按钮 function createFloatyButton() { if (floatyButton) { floatyButton.close(); } floatyButton = floaty.window( <frame gravity="center" bg="#AA00FF00"> <button id="btn" text="悬浮按钮" w="80" h="40" bg="#FF2196F3" textColor="white"/> </frame> ); // 设置悬浮按钮位置 floatyButton.setPosition(device.width - 200, device.height / 2); // 悬浮按钮点击事件 floatyButton.btn.click(() => { showFloatyWindow(); }); } // 显示全屏悬浮窗 function showFloatyWindow() { // 隐藏悬浮按钮 if (floatyButton) { floatyButton.close(); floatyButton = null; } // 创建全屏悬浮窗 floatyWindow = floaty.rawWindow( <frame bg="#99000000" id="root"> <linear gravity="center" orientation="vertical"> <button id="centerBtn" text="点击5次退出\n(点击计数: 0)" w="200" h="100" bg="#FF4CAF50" textColor="white" textSize="16"/> <text id="hint" text="或者按音量减键退出" textColor="#FFFFFF" textSize="14" marginTop="20"/> </linear> </frame> ); // 设置全屏 floatyWindow.setSize(device.width, device.height); // 中间按钮点击事件 clickCount = 0; floatyWindow.centerBtn.click(() => { handleCenterButtonClick(); }); // 在Auto.js 6.x中,拦截触摸事件的方式 // 设置根布局的触摸监听器 floatyWindow.root.setOnTouchListener(function(view, event) { // 返回true表示消费事件,阻止传递到底应用 return true; }); } // 处理中间按钮点击 function handleCenterButtonClick() { let currentTime = new Date().getTime(); // 检查是否在2秒内连续点击 if (currentTime - lastClickTime > 2000) { clickCount = 0; // 重置计数 } clickCount++; lastClickTime = currentTime; // 更新按钮文本 floatyWindow.centerBtn.setText("点击5次退出\n(点击计数: " + clickCount + ")"); // 检查是否达到5次点击 if (clickCount >= 5) { exitFloatyWindow(); } // 2秒后重置计数(如果后续没有点击) threads.start(function() { sleep(2000); let now = new Date().getTime(); if (now - lastClickTime >= 2000) { clickCount = 0; if (floatyWindow && floatyWindow.centerBtn) { ui.run(() => { floatyWindow.centerBtn.setText("点击5次退出\n(点击计数: 0)"); }); } } }); } // 注册音量键监听 function registerVolumeKeyListener() { // 移除之前可能存在的监听器 if (volumeKeyListener) { events.removeAllListeners("key_down"); } // 音量下键监听 events.observeKey(); events.on("key_down", function(keyCode, event) { if (keyCode === events.KEYCODE_VOLUME_DOWN && floatyWindow) { exitFloatyWindow(); // 在Auto.js 6.x中,不能使用preventDefault,但可以尝试消费事件 // 通过返回true来尝试消费事件 return true; } }); } // 退出全屏悬浮窗 function exitFloatyWindow() { if (floatyWindow) { floatyWindow.close(); floatyWindow = null; } // 重新显示悬浮按钮 createFloatyButton(); toast("已退出全屏模式"); } // 脚本退出时的清理工作 function cleanup() { if (floatyButton) { floatyButton.close(); } if (floatyWindow) { floatyWindow.close(); } // 移除按键监听 events.removeAllListeners("key_down"); } // 注册脚本退出事件 events.on("exit", cleanup); 优化
最新发布
11-29
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值