翻页容器怎么用
🤖 回答引擎: 前端Lua |
🕒 时间: 2026-03-10 01:23:47 |
👁️ 阅读: 13
翻页容器（PageView）在996引擎中用于创建可左右或上下滑动的页面切换效果，比如背包分页、商城标签页等。下面我通过一个完整案例来教你如何使用。
## 1. 创建翻页容器
```lua
-- 先创建父窗口
local parent = GUI:Win_Create("PageViewDemo", 0, 0, 0, 0, false, false, true, false, false, false, 1)
-- 创建翻页容器
local pageView = GUI:PageView_Create(parent, "MyPageView", 100, 100, 400, 300, 1)
-- 参数说明：
-- parent: 父节点
-- "MyPageView": 唯一ID
-- 100,100: 位置坐标
-- 400,300: 宽高
-- 1: 方向（1垂直，2水平）
```
## 2. 创建并添加子页面
```lua
-- 创建第一个子页面
local page1 = GUI:Widget_Create(pageView, "page1", 0, 0, 400, 300)
GUI:Widget_setBackGroundColor(page1, "#FF0000") -- 红色背景
-- 在page1上添加一些内容
local text1 = GUI:Text_Create(page1, "text1", 50, 50, 20, "#FFFFFF", "这是第一页")
local btn1 = GUI:Button_Create(page1, "btn1", 150, 150, "res/public/1900000612.png")
GUI:Button_setTitleText(btn1, "第一页按钮")
-- 创建第二个子页面
local page2 = GUI:Widget_Create(pageView, "page2", 0, 0, 400, 300)
GUI:Widget_setBackGroundColor(page2, "#00FF00") -- 绿色背景
-- 添加子页面到翻页容器
GUI:PageView_addPage(pageView, page1)
GUI:PageView_addPage(pageView, page2)
```
## 3. 设置翻页容器属性
```lua
-- 设置是否有裁切（默认true）
GUI:PageView_setClippingEnabled(pageView, true)
-- 设置背景颜色（单色）
GUI:PageView_setBackGroundColor(pageView, "#333333")
-- 设置背景颜色类型：1单色，2渐变色
GUI:PageView_setBackGroundColorType(pageView, 1)
-- 设置背景透明度（0-255）
GUI:PageView_setBackGroundColorOpacity(pageView, 200)
```
## 4. 添加翻页监听事件
```lua
-- 监听翻页事件
GUI:PageView_addOnEvent(pageView, function(eventType, currentIndex)
if eventType == 0 then -- 0表示翻页事件
SL:Print("翻页到第", currentIndex + 1, "页")
-- currentIndex从0开始，所以要+1
end
end)
```
## 5. 控制翻页
```lua
-- 创建控制按钮
local prevBtn = GUI:Button_Create(parent, "prevBtn", 50, 420, "res/public/1900000612.png")
GUI:Button_setTitleText(prevBtn, "上一页")
local nextBtn = GUI:Button_Create(parent, "nextBtn", 200, 420, "res/public/1900000612.png")
GUI:Button_setTitleText(nextBtn, "下一页")
-- 上一页按钮事件
GUI:addOnClickEvent(prevBtn, function()
local currentIndex = GUI:PageView_getCurrentPageIndex(pageView)
if currentIndex > 0 then
GUI:PageView_scrollToItem(pageView, currentIndex - 1)
end
end)
-- 下一页按钮事件
GUI:addOnClickEvent(nextBtn, function()
local currentIndex = GUI:PageView_getCurrentPageIndex(pageView)
local totalPages = GUI:PageView_getItemCount(pageView)
if currentIndex < totalPages - 1 then
GUI:PageView_scrollToItem(pageView, currentIndex + 1)
end
end)
```
## 6. 获取翻页容器信息
```lua
-- 获取当前页面索引（从0开始）
local currentIndex = GUI:PageView_getCurrentPageIndex(pageView)
SL:Print("当前在第", currentIndex + 1, "页")
-- 获取所有子页面
local pages = GUI:PageView_getItems(pageView)
SL:Print("总共有", #pages, "个页面")
-- 获取页面数量
local pageCount = GUI:PageView_getItemCount(pageView)
SL:Print("页面数量：", pageCount)
```
## 7. 完整示例：带动画的翻页
```lua
-- 创建翻页容器
local pageView = GUI:PageView_Create(parent, "AnimatedPageView", 100, 100, 400, 300, 2) -- 2表示水平方向
-- 创建3个页面
for i = 1, 3 do
local page = GUI:Widget_Create(pageView, "page"..i, 0, 0, 400, 300)
-- 设置不同颜色背景
local colors = {"#FF9999", "#99FF99", "#9999FF"}
GUI:Widget_setBackGroundColor(page, colors[i])
-- 添加页面文字
local text = GUI:Text_Create(page, "text"..i, 150, 120, 24, "#000000", "第"..i.."页")
GUI:Text_setFontName(text, "fonts/font5.ttf")
-- 添加到翻页容器
GUI:PageView_addPage(pageView, page)
end
-- 设置自动翻页（每3秒翻一页）
local currentPage = 0
SL:Schedule(function()
currentPage = (currentPage + 1) % 3
GUI:PageView_scrollToItem(pageView, currentPage)
end, 3) -- 每3秒执行一次
```
## 常见问题解答
**Q：翻页容器怎么设置垂直方向？**
A：创建时最后一个参数传1：`GUI:PageView_Create(parent, "ID", x, y, w, h, 1)`
**Q：如何跳转到指定页面？**
A：使用`GUI:PageView_scrollToItem(pageView, index)`，index从0开始
**Q：翻页时有动画效果吗？**
A：`scrollToItem`方法自带平滑滚动动画
**Q：怎么获取用户当前滑到了哪一页？**
A：通过`PageView_addOnEvent`监听翻页事件，或者用`PageView_getCurrentPageIndex`获取
记住：翻页容器适合做选项卡切换、引导页、图集浏览等需要分页展示的功能。如果还有不明白的地方，随时问我！
← 返回问答库