更新记录

1.0.0（2025-09-21） 下载此版本

1. 通过计算属性getRowClass根据索引值判断奇偶行，动态返回不同的样式类；
2. 偶数行使用白色背景，奇数行使用浅蓝色背景，形成明显的视觉区分；
3. 添加了简单的过渡动画和 hover 效果，提升用户体验； 4.列表项包含索引、标题和描述信息，结构清晰.

平台兼容性

其他

# First Extension For HBuilderX

开发文档参考：https://hx.dcloud.net.cn

本示例使用步骤： 使用 Vue3 语法在 UniApp 中实现一个隔行变色的列表组件。通过计算属性来动态设置每行的背景颜色。

这个实现的主要特点：

1. 使用 Vue3 的语法，更加简洁直观
2. 通过计算属性getRowClass根据索引值判断奇偶行，动态返回不同的样式类
3. 偶数行使用白色背景，奇数行使用浅蓝色背景，形成明显的视觉区分
4. 添加了简单的过渡动画和 hover 效果，提升用户体验
5. 列表项包含索引、标题和描述信息，结构清晰 你可以根据需要调整even-row和odd-row的 CSS 样式，改变背景色或其他视觉属性来满足设计需求。 如果需要从接口获取数据，只需将listData的初始化方式改为从 API 请求数据即可。

本插件使用步骤：

1. 查找插件 进入插件市场：打开 HBuilderX 编辑器，点击菜单栏中的 “插件” -> “插件市场”，或者直接访问uni-app 插件市场官网 。 搜索插件：在插件市场的搜索框中输入关键词，查找本插件，比如搜索 “列表隔行变色” 。 筛选插件：筛选出列表隔行变色插件。
2. 安装插件 方式一：在 HBuilderX 中安装 在插件市场找到目标插件后，点击进入插件详情页。 点击 “使用 HBuilderX 导入插件” 按钮（如果是免费插件，直接导入；如果是付费插件，需要先购买 ）。 选择要导入插件的 uni-app 项目，确认导入。导入成功后，插件会被放置在项目的 uni_modules 目录下。 方式二：通过命令行安装（适用于发布到 npm 的插件） 打开命令行工具，进入你的 uni-app 项目根目录。 执行 npm install 插件名称 命令，例如 npm install my-uniapp-plugin 。 安装完成后，同样可以在项目的 uni_modules 目录下找到该插件。