SL:print("打开图鉴界面")
local npc = {}
npc.config = {
-- 套装1：烈焰战神
[1] = {
name = "烈焰战神",
itemsIdx = {50037, 50038, 50039, 50040, 50041},
itemsName = {"屠龙", "骨玉权杖", "裁决之杖", "凝血", "霸者之刃"},
attrs = {
{id
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-03-11 13:35:55 |
👁️ 阅读: 15
根据浮生梦老师前端课程内容，我来帮你优化图鉴界面的翻页功能。你需要使用翻页容器（PageView）来控制按钮的翻页显示。
```lua
SL:print("打开图鉴界面")
local npc = {}
npc.config = {
-- 套装配置表（保持原样）
[1] = { name = "烈焰战神", itemsIdx = {50037, 50038, 50039, 50040, 50041}, itemsName = {"屠龙", "骨玉权杖", "裁决之杖", "凝血", "霸者之刃"}, attrs = {{id = 3, value = 50}, {id = 4, value = 50}, {id = 21, value = 15}, {id = 25, value = 20}} },
-- ... 其他套装配置（保持原样）
[25] = { name = "暗月法师", itemsIdx = {50157, 50158, 50159, 50160, 50161}, itemsName = {"虹魔戒指", "虹魔手镯", "虹魔项链", "圣战头盔", "圣战项链"}, attrs = {{id = 5, value = 65}, {id = 6, value = 65}, {id = 15, value = 28}, {id = 27, value = 28}} }
}
local function networkCB(msgID, p1, p2, p3, msgData)
SL:print("===== 收到后端消息 =====")
SL:print("消息ID: " .. tostring(msgID))
SL:print("参数1: " .. tostring(p1))
SL:print("参数2: " .. tostring(p2))
SL:print("参数3: " .. tostring(p3))
SL:print("字符串: " .. tostring(msgData))
SL:print("=======================")
if msgID == 1014 and msgData == "装备图鉴" then
if p1 == 14 and p2 == 0 then
npc:openWin()
end
end
end
function npc:openWin()
-- 创建主界面
local win_illustratedGuide = GUI:Win_Create("win_illustratedGuide", 0, 0, 0, 0)
GUI:LoadExport(win_illustratedGuide, "illustratedGuide")
npc.ui = GUI:ui_delegate(win_illustratedGuide)
-- 关闭按钮事件
GUI:addOnClickEvent(npc.ui.esc, function()
GUI:Win_Close(win_illustratedGuide)
end)
-- 创建翻页容器（每页显示18个按钮）
local pageView = GUI:PageView_Create(npc.ui.btn_Layout, "btnPageView", 0, 0, 230, 400)
-- 计算总页数（25个套装，每页18个）
local totalSuits = 25
local suitsPerPage = 18
local totalPages = math.ceil(totalSuits / suitsPerPage)
-- 设置翻页容器背景
GUI:PageView_setBackGroundColor(pageView, "#000000")
GUI:PageView_setBackGroundColorType(pageView, 1)
GUI:PageView_setBackGroundColorOpacity(pageView, 0)
-- 创建各页面
for pageIndex = 1, totalPages do
-- 创建单页容器
local pageContainer = GUI:Layout_Create(nil, "page_" .. pageIndex, 0, 0, 230, 400)
GUI:setTouchEnabled(pageContainer, false)
-- 计算当前页的按钮范围
local startIndex = (pageIndex - 1) * suitsPerPage + 1
local endIndex = math.min(pageIndex * suitsPerPage, totalSuits)
-- 按钮布局参数
local btnStart_x = 0
local btnStart_y = 363
local spacing_x = 116
local spacing_y = 45
-- 在当前页创建按钮
for i = startIndex, endIndex do
local suitConfig = npc.config[i]
if suitConfig then
-- 计算按钮在页内的位置（0-17）
local pagePos = (i - 1) % suitsPerPage
local col = pagePos % 2
local row = math.floor(pagePos / 2)
-- 计算坐标
local btn_x = col * spacing_x + btnStart_x
local btn_y = btnStart_y - (row * spacing_y)
-- 创建按钮
local btnName = "btn_" .. i
local btn = GUI:Button_Create(pageContainer, btnName, btn_x, btn_y, "res/01/010006.png")
-- 设置按钮状态图片
GUI:Button_loadTextureDisabled(btn, "res/01/010005.png")
-- 设置按钮文字
GUI:Button_setTitleText(btn, suitConfig.name)
GUI:Button_setTitleFontSize(btn, 16)
GUI:Button_setTitleColor(btn, "#ffffff")
-- 按钮点击事件
GUI:addOnClickEvent(btn, function()
-- 处理选中状态
if npc.selectBtn then
GUI:Button_setTitleColor(npc.selectBtn, "#ffffff")
end
GUI:Button_setTitleColor(btn, "#00ff00")
npc.selectBtn = btn
-- 显示对应套装的图鉴
npc:showSuitDetails(i)
end)
end
end
-- 将页面添加到翻页容器
GUI:PageView_addPage(pageView, pageContainer)
end
-- 设置总页数显示
GUI:Text_setString(npc.ui.pageTotalNumber, "/ " .. totalPages)
-- 默认显示第一页
GUI:PageView_setCurrentPageIndex(pageView, 1)
end
-- 显示套装详情函数
function npc:showSuitDetails(suitIndex)
local suitConfig = npc.config[suitIndex]
if not suitConfig then return end
-- 清除之前的图鉴显示
local contentLayout = npc.ui.IG_bg
-- 这里需要清除contentLayout中的子节点，可以使用遍历移除
-- 创建新的图鉴显示
local imgStart_x = 10
local imgStart_y = 200
for i = 1, #suitConfig.itemsIdx do
local itemIdx = suitConfig.itemsIdx[i]
local itemName = suitConfig.itemsName[i] or ""
-- 计算位置（3列布局）
local col = (i - 1) % 3
local row = math.floor((i - 1) / 3)
local img_x = col * 162 + imgStart_x
local img_y = imgStart_y - row * 160
-- 创建背景
local itemShowBg = GUI:Image_Create(contentLayout, "itemBg_" .. i, img_x, img_y, "res/public/1900000610.png")
GUI:setContentSize(itemShowBg, 165, 150)
-- 创建物品显示
local itemShow = GUI:ItemShow_Create(itemShowBg, "itemShow_" .. i, 60, 100, {
index = itemIdx,
count = 1,
look = true,
bgVisible = true,
color = 255
})
-- 显示物品名称
local nameText = GUI:Text_Create(itemShowBg, "itemName_" .. i, 0, 20, 14, "#ffffff", itemName)
GUI:Text_setHorizontalAlignment(nameText, 1)
end
SL:print("显示套装：" .. suitConfig.name)
end
-- 注册网络消息
SL:RegisterLuaNetMsg(1014, networkCB)
```
**关键改进点：**
1. **使用翻页容器**：`GUI:PageView_Create` 创建翻页容器，每页自动显示18个按钮
2. **自动分页**：25个套装自动分配到2页（第1页18个，第2页7个）
3. **页面管理**：`GUI:PageView_addPage` 添加页面，`GUI:PageView_setCurrentPageIndex` 设置当前页
4. **优化结构**：将图鉴显示逻辑分离到 `showSuitDetails` 函数中
5. **按钮布局**：保持原有的2列9行布局，每页正好18个按钮
**翻页容器参数说明：**
- `parent`: 父节点（npc.ui.btn_Layout）
- `ID`: 唯一标识符
- `x, y`: 位置坐标
- `width, height`: 容器尺寸
- `direction`: 翻页方向（垂直或水平）
这样修改后，你的图鉴界面就会有自动翻页功能，超过18个按钮会自动分配到下一页，用户可以通过滑动或点击翻页按钮来查看所有套装。
← 返回问答库