← 返回滑动分页组件参考 · 全部使用指导

滑动分页使用指导

• 滑动分页使用指导
  • 工作原理
  • 快速上手
  • 案例一：首页标签页 + 未读角标
  • 案例二：新手引导页（只在第一次打开时显示）
  • 案例三：电商左侧分类页
  • 案例四：整屏标签页，页面内容可滚动
  • 案例五：与底部导航条联动
  • 外观定制
  • 常见问题
  • 平台说明
  • 完整 .aia 源码与操作指导
    • 设备应用滑动分页

滑动分页把几个布局当作几个页面，用户左右滑动或点标签切换。一个组件覆盖四种常见界面：

和相近组件的区别：

工作原理

• 页面就是布局：在设计器里搭好几个布局（垂直布局、垂直滚动条布局等），屏幕初始化时用 添加页面（布局，标题）（AddPage）依次放进分页。布局会从屏幕原来的位置挪进分页里， 并自动变为可见；布局里的组件照常使用，事件、属性都不变。
• 页面序号从 1 开始：当前页（CurrentPage）、设置角标（索引，文本）（SetBadge）、 切换时（索引，标题）（PageChanged）事件里的序号都是第几页，与添加的先后顺序一致。
• 添加第一页时不触发「切换时」：第一页加进来就直接显示。首页的初始化（比如加载数据）写在添加页面的代码后面， 不要只依赖「切换时」事件。
• 所有页面常驻：切走的页面不会被销毁，回来时输入框的内容、滚动位置都还在。
• 尺寸：组件默认宽度充满、高度 180 像素。标签栏占去一部分（顶部标签栏高约 44、左侧分类栏宽约 96、 底部圆点区高约 24），页面填满剩下的区域，内容超出会被截断。做整屏的标签页时把高度设为「充满」， 内容长的页面用垂直滚动条布局当页面（见案例四）。
• 标签多了可以横向滑动：顶部标签按文字宽度排列，放不下时标签栏本身可以左右滑动；左侧分类栏放不下时可以上下滑动。

设计器显示的是“示意页面”，不会自动成为运行时页面；必须调用 AddPage。屏幕可滚动且高度为自动时，内容区按页面高度测量，至少保留 136 像素，再加标签栏或圆点区域。

快速上手

1. 拖一个滑动分页到屏幕，把它的高度设为「充满」；
2. 拖三个垂直布局，分别改名 垂直布局_推荐、垂直布局_关注、垂直布局_热门， 取消勾选「可见」（否则打开屏幕时会先在原位置闪一下），每个里面放一个标签写上页面内容；
3. 搭下面的代码块：

when Screen1.Initialize() {
  滑动分页1.AddPage(垂直布局_推荐, "推荐")
  滑动分页1.AddPage(垂直布局_关注, "关注")
  滑动分页1.AddPage(垂直布局_热门, "热门")
}

运行后左右滑动，或点顶部的「推荐 / 关注 / 热门」切换页面。

案例一：首页标签页 + 未读角标

「关注」页有新内容时在标签上显示红色角标，切到这一页后清除。未读数超过 99 显示「99+」：

global 关注未读 = 0

when Screen1.Initialize() {
  滑动分页1.AddPage(垂直布局_推荐, "推荐")
  滑动分页1.AddPage(垂直布局_关注, "关注")
  滑动分页1.AddPage(垂直布局_热门, "热门")
  关注未读 = 5
  显示关注角标()
}

procedure 显示关注角标() {
  if 关注未读 == 0 {
    滑动分页1.SetBadge(2, "")
  } else if 关注未读 > 99 {
    滑动分页1.SetBadge(2, "99+")
  } else {
    滑动分页1.SetBadge(2, 关注未读)
  }
}

when 按钮_模拟新消息.Click() {
  关注未读 = 关注未读 + 1
  显示关注角标()
}

when 滑动分页1.PageChanged(索引, 标题) {
  标签_状态.Text = join("正在看：", 标题)
  if 索引 == 2 {
    关注未读 = 0
    显示关注角标()
  }
}

要点：

• 角标文字可以是数字，也可以是「新」「热」这样的短字；传空文本清除；
• 切换时（索引，标题）（PageChanged）事件的两个参数：第几页、这一页的标题， 滑动、点标签、代码设置当前页（CurrentPage）都会触发；
• 标题也能在运行时改，比如在标题里带上数量：滑动分页1.SetPageTitle(2, join("关注(", 关注未读, ")"))。

案例二：新手引导页（只在第一次打开时显示）

标签样式（TabStyle）选 dots，页面下方显示圆点。设计器里准备：

• 滑动分页的高度设为「充满」、标签样式（TabStyle）选「圆点」；
• 三个垂直布局 垂直布局_第一页、垂直布局_第二页、垂直布局_第三页（取消勾选「可见」），每页放一张图片和一段说明；
• 前两页各放一个「下一页」按钮（按钮_下一页1、按钮_下一页2），第三页放一个 按钮_开始使用；
• 屏幕顶部放一个 按钮_跳过，再拖一个微数据库记住是否看过引导。

when Screen1.Initialize() {
  if 微数据库1.GetValue("看过引导", false) {
    openAnotherScreen("Screen2")
  } else {
    滑动分页1.AddPage(垂直布局_第一页, "")
    滑动分页1.AddPage(垂直布局_第二页, "")
    滑动分页1.AddPage(垂直布局_第三页, "")
  }
}

when 按钮_下一页1.Click() {
  滑动分页1.CurrentPage = 2
}

when 按钮_下一页2.Click() {
  滑动分页1.CurrentPage = 3
}

when 滑动分页1.PageChanged(索引, 标题) {
  按钮_跳过.Visible = 索引 < 滑动分页1.PageCount
}

when 按钮_开始使用.Click() {
  微数据库1.StoreValue("看过引导", true)
  openAnotherScreen("Screen2")
}

when 按钮_跳过.Click() {
  微数据库1.StoreValue("看过引导", true)
  openAnotherScreen("Screen2")
}

要点：

• 设置当前页（CurrentPage）会带滑动动画切过去；设成当前页本身或超出范围时什么也不做；
• 圆点样式下没有标签，页面标题可以传空文本；
• 最后一页隐藏「跳过」按钮，用的是页面数量（PageCount），以后加减引导页不用改代码。

案例三：电商左侧分类页

标签样式（TabStyle）选 left：左边一列分类，右边是该分类的商品。 这种样式只能点分类切换、不能左右滑动，免得和右边内容里的横向滑动打架。

设计器里：滑动分页高度「充满」、标签样式「左侧」；每个分类一个垂直滚动条布局（商品多时可上下滚动）， 里面放商品按钮或列表显示框。

when Screen1.Initialize() {
  滑动分页1.AddPage(垂直滚动条布局_水果, "水果")
  滑动分页1.AddPage(垂直滚动条布局_蔬菜, "蔬菜")
  滑动分页1.AddPage(垂直滚动条布局_肉禽, "肉禽蛋")
  滑动分页1.AddPage(垂直滚动条布局_零食, "零食")
  滑动分页1.SetBadge(4, "新")
  列表显示框_水果.ElementsFromString = "苹果,香蕉,橙子,葡萄,西瓜"
}

when 滑动分页1.PageChanged(索引, 标题) {
  if 索引 == 2 {
    列表显示框_蔬菜.ElementsFromString = "白菜,萝卜,西红柿,黄瓜"
  }
}

when 列表显示框_水果.AfterPicking() {
  标签_已选.Text = join("已选：", 列表显示框_水果.Selection)
}

要点：

• 第一个分类（水果）在添加完页面后直接加载数据——添加第一页不会触发「切换时」；
• 其它分类可以在第一次切到时再加载，减少打开屏幕时的等待；
• 选中的分类左侧有一条竖线并带浅色底，颜色由选中颜色（SelectedColor）决定。

案例四：整屏标签页，页面内容可滚动

页面内容比分页区域高时会被截断——用垂直滚动条布局当页面即可上下滚动：

1. 滑动分页的高度设为「充满」；
2. 每个页面用垂直滚动条布局（宽度「充满」），里面放多个标签、图片；
3. 如果某一页里有横向滚动的内容（横向滚动布局、图片轮播），把可滑动（Swipeable）设为假， 只用点标签切换，避免两种滑动手势冲突。

when Screen1.Initialize() {
  滑动分页1.AddPage(垂直滚动条布局_文章, "文章")
  滑动分页1.AddPage(垂直滚动条布局_评论, "评论")
  滑动分页1.FontSize = 16
  滑动分页1.SelectedColor = &HFFE91E63
}

案例五：与底部导航条联动

做「底部导航 + 左右滑动切页」的 App 骨架：滑动分页负责页面（标签样式（TabStyle）选「无」）， 导航条停靠在屏幕底部负责切换。点导航切页、滑页也同步导航选中项：

when Screen1.Initialize() {
  滑动分页1.AddPage(垂直布局_首页, "首页")
  滑动分页1.AddPage(垂直布局_发现, "发现")
  滑动分页1.AddPage(垂直布局_消息, "消息")
  滑动分页1.AddPage(垂直布局_我的, "我的")
}

when 导航条1.ItemSelected(索引) {
  滑动分页1.CurrentPage = 索引
}

when 滑动分页1.PageChanged(索引, 标题) {
  导航条1.SetSelectedItem(索引)
}

两边互相设置不会死循环：设置成当前已经在的那一页时不会再触发事件。

外观定制

角标固定为红底白字的小圆角块。深色主题的页面可以把标签栏背景设为深色、未选中颜色设为浅灰。

常见问题

平台说明

• 编译 APK 与鸿蒙 HAP 都支持；
• 这是新增的内置组件，用 AI 伴侣联机调试时需要更新到包含它的伴侣版本。

完整 .aia 源码与操作指导

下载 .aia 源码

设备应用的三个真实布局页面，包含标签切换、内部滚动、常驻输入、未读角标与运行时第四页。示例计数和消息明确标为本地测试数据；全部页面在初始化实际加入分页，避免仅有设计器示意页。

导入 SwipePagerAllFeatures.aia，连接最新伴侣，或编译独立安装包。真机／伴侣运行尚未实测。

所有返回值均用于界面反馈，错误由底部错误区展示。设计器采用明确非默认配置，初始化与界面同步。API 覆盖检查按最终 AIA 检查方法、事件、属性读取与设置及设计器配置，不能替代真实设备验证。

设备应用滑动分页

导入方法：项目 → 导入项目（.aia）→ 选择下载的 .aia 源码文件。 设备应用的三个真实布局页面，包含标签切换、内部滚动、常驻输入、未读角标与运行时第四页。示例计数和消息明确标为本地测试数据；全部页面在初始化实际加入分页，避免仅有设计器示意页。 覆盖检查 40/40。首次载入及保存重开均0个错误，真实后台导入、安装包编译通过；真机／伴侣／硬件联调尚未实测。全部属性读写、方法与事件的操作入口和预期结果见组件指导。