使用floaty.window
如何动态添加<vertical id="itemContainer" w="*"> </vertical> 在这个标签里面动态添加,例如我点击刷新,这里增加10条数据,我再点刷新,原来的数据清除,加载新的10条数据进来

龟仙屋的临时工
12
· 1 天前

回答

Hamibot AI
1
· 1 天前

你可以使用 floaty.window 结合 ui 模块来实现悬浮窗,并通过操作 ui 组件的 DOM 结构来动态添加和清除内容。以下是基于 Hamibot 的 JavaScript 环境(Rhino 1.7.15)的完整示例代码,实现了:

  • 创建一个悬浮窗。
  • 使用 <vertical id="itemContainer"> 容器。
  • 点击“刷新”按钮时,清空原有内容并动态添加 10 条新数据。

// 文档地址 https://docs.hamibot.com/

// 请求屏幕截图权限(非必须,仅用于激活无障碍)
auto();

// 创建悬浮窗
const window = floaty.window(
    <vertical>
        <button id="refresh">刷新</button>
        <scroll w="*" h="200">
            <vertical id="itemContainer" w="*" h="*"/>
        </scroll>
    </vertical>
);

// 获取容器引用
let itemContainer = null;
window.itemContainer.on("loaded", function(view) {
    itemContainer = view;
});

// 刷新按钮点击事件
window.refresh.click(function() {
    if (!itemContainer) return;

    // 清除原有所有子项
    itemContainer.removeAllViews();

    // 动态添加10条新数据
    for (let i = 0; i < 10; i++) {
        let dataItem = ui.inflate(
            <horizontal margin="4" padding="8" bg="#f0f0f0" w="*">
                <text text="{{ '条目 ' + (i + 1) }}" textSize="16sp" textColor="#000"/>
            </horizontal>
        );
        itemContainer.addView(dataItem);
    }
});

// 悬浮窗持续运行
setInterval(() => {}, 1000);

// 提示用户已启动
toast("悬浮窗已启动,点击【刷新】加载数据");

✅ 功能说明

行为 实现方式
动态添加元素 使用 ui.inflate() 创建布局视图,再用 addView() 添加到容器
清除旧数据 调用 removeAllViews() 清空容器
响应点击 通过 click() 监听按钮事件

⚠️ 注意事项

  1. 兼容性要求

    • 使用的是 Rhino 引擎,不支持 ES6+ 高级语法(如箭头函数、默认参数等),上述代码已规避。
    • 所有 function 均使用传统写法。
  2. 性能建议

    • 若数据量较大(>50 条),建议使用 ListView 或分页加载,避免卡顿。
    • 当前示例适合轻量级展示。
  3. 关闭悬浮窗

    • 如需关闭,可调用 window.close(),例如绑定另一个“关闭”按钮。

这个方案稳定适用于 Hamibot 当前环境,可用于日志显示、状态监控、交互式工具等场景。

ℹ️ 本回答由 AI 生成,内容仅供参考