CHUAN2 DEV ENGINE
996 正版授权研发中心 · 360 授权合作教学中心 · 抖音传奇直播合作授权 · 快手推广运营商授权
OFFICIAL LICENSED ACADEMY 查验官方授权证书 →
// 威海旷世互娱教学基地 · 技术文章
界面UI

【界面UI】Tab 页切换:页签懒加载与状态保持

2026-09-23 15:12 作者:996 技术组 0 阅读 996引擎Lua教程传奇脚本

实战应用:用在哪里

角色面板的六个页签、背包的四个分类、活动中心的八个入口——Tab 切换是界面的基本骨架。全部页签一次建齐的写法让打开面板的第一帧背负六个页面的构建成本,懒加载加状态保持的组合让切换即时、构建延后。

懒加载的骨架

lua

---页签容器:切换时才构建页面
local Panel = { tabs = {}, pages = {}, built = {} }

function Panel.init(win, defs)
    for i, d in ipairs(defs) do
        local btn = GUI:Button_Create(win, "tab_" .. d.key,
            10 + (i - 1) * 80, 10)
        GUI:Button_setTitleText(btn, d.title)
        GUI:addOnClickEvent(btn, function()
            Panel.switch(d.key)
        end)
        Panel.tabs[d.key] = btn
    end
    Panel.defs = defs
end

function Panel.switch(key)
    local page = Panel.pages[key]
    if not page and not Panel.built[key] then
        for _, d in ipairs(Panel.defs) do
            if d.key == key then
                page = d.build()      -- 首次进入才构建
                Panel.pages[key] = page
                Panel.built[key] = true
            end
        end
    end
    Panel.showOnly(key)
end

页签按钮在 init 时全部创建,页面本体延迟到首次切换才构建——角色面板打开的耗时从六页齐建的 300 毫秒降到骨架的 50 毫秒,构建的成本分摊到每次真实的访问。页签的选中态在切换时统一刷新,当前页签高亮加底色,未选中回归默认。构建过的页面缓存进 pages 表,二次切换零成本,懒加载只发生在人生的第一面。

状态的保持

lua

---页面隐藏而非销毁:滚动与输入状态保留
function Panel.showOnly(key)
    for k, page in pairs(Panel.pages) do
        GUI:setVisible(page, k == key)
    end
end

---数据变更的页面标记脏,回切时刷新
function Panel.dirty(key)
    Panel.dirtySet[key] = true
end

function Panel.switch(key)
    -- ... 懒加载逻辑 ...
    if Panel.dirtySet[key] then
        Panel.reloadPage(key)
        Panel.dirtySet[key] = nil
    end
    Panel.showOnly(key)
end

切走的页面走 setVisible 隐藏而非销毁:背包页的滚动位置、行会页的展开状态在切回时原样保留,用户的上下文不断裂。数据的变更用脏标记驱动回切刷新:行会公告在别的页面被改了,行会页标记脏,切回时重拉一次,隐藏期间的变更不丢失。页签数量超宽时的左右箭头滚动、页签的角标(背包满时的红点)与切换逻辑解耦,骨架只管切换的事。面板关闭时的内存回收策略可配:常驻面板(背包)保页面,低频面板(活动)销毁页面只留脏标记。

验证与监控

面板打开的首帧耗时与页签切换的耗时埋点,切换超过 50 毫秒即回归;脏标记的刷新正确性测试:变更、切走、切回三步的数据一致性断言。

踩坑记录

销毁重建的切换曾经把背包页的滚动位置清零,玩家翻到第 5 页切一次回来回到顶部,隐藏替代销毁。懒加载的首次切换曾经卡一帧,构建的耗时拆到两帧分步呈现。脏标记曾经忘记清除,页面每次切换都重拉,标记的用后即清。

上线要点

页签的定义进配置:键、标题、构建函数的映射集中注册。角标的驱动事件与页签解耦,业务只管发角标事件。页面的构建函数返回统一的接口约定(show、hide、reload),骨架对页面零感知。

本文由 996 技术组基于 996 引擎官方知识库与浮生梦老师课程体系整理。团队长期从事传奇类引擎 Lua 后端逻辑、客户端界面与商业版本交付,内容以官方知识库与真实项目为出处,按版本持续修订。

作者履历与出处

本文由 996 技术组基于 996 引擎官方知识库与浮生梦老师课程体系整理。团队长期从事传奇类引擎 Lua 后端逻辑、客户端界面与商业版本交付,内容以官方知识库与真实项目为出处,按版本持续修订。

← 返回文章地图返回研学路径

最新技术文章 · 实战干货

LATEST ARTICLES

全站技术干货持续更新:996 引擎 / Lua 实战帖,语法、参数与示例一篇讲透。进入文章地图 · 查看全部 →

引擎触发烈火剑法连击战士

【引擎触发】疾风烈火斩:烈火剑法连击的判定触发设计

实战应用:用在哪里 战士的烈火剑法一击熄火后要等八秒冷却,连招断档感强烈。疾风烈火斩在烈火剑法命中后给一次连击窗口:三秒内再…

2026-09-23 15:45 996 技术组 · 0 阅读
玩法策划阵营声望声望压制

【玩法策划】阵营声望:声望等级与敌对压制设计

实战应用:用在哪里 阵营对抗打到中期容易疲软:打赢没有额外好处,输掉也没有代价。阵营声望体系给阵营战装上荣誉刻度:个人与阵营…

2026-09-23 15:45 996 技术组 · 0 阅读
玩法策划城主施政市政建设

【玩法策划】城主施政:市政令牌与城市建设玩法

实战应用:用在哪里 拿下沙巴克之后呢?城主除了名字挂在城墙上,对城市毫无影响。城主施政玩法让占领变成治理:城主每周获得市政令…

2026-09-23 15:45 996 技术组 · 0 阅读
运维发布备用线路切换演练

【运维发布】备用线路:主线路故障的自动切换演练

实战应用:用在哪里 主线路光缆被挖断的深夜,全服掉线 20 分钟,玩家以为游戏倒闭。备用线路方案给接入层配第二条出口:主线路…

2026-09-23 15:44 996 技术组 · 0 阅读
后端接口行会选举换届

【后端接口】行会选举:官员换届的投票与任期接口

实战应用:用在哪里 行会官员由帮主任命的老模式弊端明显:任人唯亲、能上不能下。行会选举接口把官员换届做成投票制:每两个月一次…

2026-09-23 15:44 996 技术组 · 0 阅读
前端接口技能悬浮卡片说明

【前端接口】技能说明悬浮:技能详情卡片的前端实现

实战应用:用在哪里 烈火剑法的伤害加成、冷却时间、下一级提升,全靠玩家记忆或去官网查。技能说明悬浮卡片在鼠标悬停技能图标零点…

2026-09-23 15:44 996 技术组 · 0 阅读