本文将指导您如何快速集成直播列表页，体验查看直播列表以及预览直播间信息功能。
功能预览
直播列表页接入
步骤1：集成核心文件
步骤2：完成登录
步骤3：制作并使用自定义基座
已制作自定义基座请忽略，由于直播功能依赖原生插件，您必须在 HBuilderX 中为您的项目制作并使用自定义调试基座来运行。
步骤4：注册直播列表页面
现在，您需要在
pages.json 文件中告诉您的应用，这个新页面是存在的。打开您项目根目录下的
pages.json 文件，在 "pages" 数组中，添加以下对象来注册直播列表页。{"pages": [// ... 您项目已有的其他页面配置{"path": "pages/livelist/index","style": {"navigationBarTitleText": "在线直播"}},]// ... 其他配置}
步骤5：跳转直播列表页面
在您需要展示直播列表的地方（具体由您的业务决定，在其点击事件里执行），调用
uni.navigateTo 或 uni.redirectTo 方法，即可进入直播列表页面// 示例：在一个按钮的点击事件中function startBroadcast() {uni.redirectTo({url: '/pages/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;});
最终效果：
指定直播间
// 在您自己的业务逻辑中增加如下跳转逻辑const handleJoinLive = (live) => {uni.$liveId = live.liveId;uni.redirectTo({ url: `/pages/audience/index?liveId=${live.liveId}`});};
其他参考文档
