这篇会指导你如何快速集成直播列表页，体验查看直播列表以及预览直播间信息功能。
一、步骤1：集成核心文件
已集成核心文件请忽略，已经按照 代码集成指引 将 TUILiveKit 的 pages、uni_modules等核心文件拷贝到了你的项目中。
二、步骤2：完成登录
已登录请忽略该步骤，你的应用已经调用了 登录接口 并成功登录。这是使用所有功能的基础
三、步骤3：制作并使用自定义基座
已制作自定义基座请忽略，由于直播功能依赖原生插件，你必须在 HBuilderX 中为你的项目制作并使用自定义调试基座来运行。
四、步骤4：注册直播列表页面
现在，你需要在 pages.json 文件中告诉你的应用，这个新页面是存在的。
打开你项目根目录下的 pages.json 文件，在 "pages" 数组中，添加以下对象来注册直播列表页。
{ "pages": [ // … 你项目已有的其他页面配置 { "path": "pages/scenes/live/livelist/index", "style": { "navigationBarTitleText": "在线直播" } }, ] // … 其他配置}
五、步骤5：跳转直播列表页面
在你需要展示直播列表的地方（具体由你的业务决定，在其点击事件里执行），调用 uni.navigateTo 或 uni.redirectTo 方法，即可进入直播列表页面
// 示例：在一个按钮的点击事件中function startBroadcast() { uni.redirectTo({ url: '/pages/scenes/live/livelist/index', // URL 对应 pages.json 中配置的 path });}
六、定制你的 UI
根据上述功能展示图，我们也支持你根据项目需求对直播列表页面进行 UI 定制能力。主要可供定制的能力如下表所示。
| 类别 | 功能 | 描述 |
| 直播间列表 | 自定义直播间列表区域展示 | 支持：直播间信息文字调整大小、字体、颜色修改每行展示直播间数量 |
七、直播间信息文字调整大小、字体、颜色
uniapp 对 nvue 页面限制字体的大小和颜色只能在 text 标签上设置，对于你想修改的文字，直接修改其 css 样式即可，下方示例以 “直播间名称” 为例
<text class="live-title" :lines="1">{{ live.liveName }}</text>.live-title { font-size: 28rpx; font-weight: 500; color: #fff; margin-bottom: 8rpx; lines: 1; max-width: 400rpx; overflow: hidden; text-overflow: ellipsis;}
修改其 css 属性：
<text class="live-title" :lines="1">{{ live.liveName }}</text>.live-title { font-size: 35rpx; font-weight: 500; color: pink; margin-bottom: 8rpx; lines: 1; max-width: 400rpx; overflow: hidden; text-overflow: ellipsis;}
最终效果如下：
八、修改每行展示直播间数量
通过设置每行展示的元素数量来修改每行展示的直播间数量：
<cell v-for="(row, rowIndex) in groupedLiveList" :key="`row-${rowIndex}-${row[0]?.liveId || 'empty'}`"> ……</cell>const groupedLiveList = computed(() => { const groups = []; for (let i = 0; i < liveList.value.length; i += 2) { const row = liveList.value.slice(i, i + 2); // 将直播列表分组，每行两个元素 groups.push(row); } return groups;});
修改每行展示的直播间数量，示例为每行展示一个：
<cell v-for="(row, rowIndex) in groupedLiveList" :key="`row-${rowIndex}-${row[0]?.liveId || 'empty'}`"> ……</cell>const groupedLiveList = computed(() => { const groups = []; for (let i = 0; i < liveList.value.length; i += 1) { const row = liveList.value.slice(i, i + 1); // 将直播列表分组，每行一个元素 groups.push(row); } return groups;});
最终效果：
九、其他参考文档
·TUILiveKit uni-app 主播开播页
·TUILiveKit uni-app 观众观看页