uniapp使用uni-ui插件

在 UniApp 中集成和使用 `uni-ui` 插件，可以通过以下步骤完成： ### 1. 安装 uni-ui 组件库 - **通过 HBuilderX 自动安装** 在项目中打开 HBuilderX，右键点击项目 -> “运行到设备”或“运行到浏览器”，HBuilderX 会自动下载并引入 `uni-ui` 组件库。 - **手动安装** 如果希望手动管理组件，可以前往 [uni-ui 官方文档](https://uniapp.dcloud.net.cn/component/uniui/quickstart.html#%E9%80%9A%E8%BF%87-uni-modules-%E5%8D%95%E7%8B%AC%E5%AE%88%E8%A3%85%E7%BB%84%E4%BB%B6) 下载所需组件，并将相关文件放入项目的 `components` 文件夹中[^2]。 ### 2. 引入组件 在需要使用的页面中，通过 `import` 和 `components` 属性注册组件。例如，如果要使用 `<uni-list>` 和 `<uni-collapse>` 等组件： ```javascript <script> import uniList from '@/components/uni-list/uni-list.vue' import uniListItem from '@/components/uni-list-item/uni-list-item.vue' import uniCollapse from '@/components/uni-collapse/uni-collapse.vue' import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue' export default { components: { uniList, uniListItem, uniCollapse, uniCollapseItem } } </script> ``` ### 3. 使用组件 在页面的 `.vue` 文件中直接使用这些组件。例如，构建一个带有自定义标题插槽的折叠面板： ```html <template> <view> <uni-collapse> <!-- 取消面板默认分隔线 --> <uni-collapse-item title-border="none" :border="false"> <template v-slot:title> <uni-list> <uni-list-item title="标题使用自定义标题插槽" :show-extra-icon="true" :extra-icon="extraIcon" > </uni-list-item> </uni-list> </template> <view class="content"> <text class="text">折叠内容主体，可自定义内容及样式</text> </view> </uni-collapse-item> </uni-collapse> </view> </template> ``` ### 4. 样式与自定义 可以在 `<style>` 部分添加自定义样式以调整组件外观： ```css <style scoped> .content { padding: 20rpx; background-color: #f9f9f9; } .text { font-size: 28rpx; color: #333; } </style> ``` ### 注意事项 - 在 App-NVue 平台上使用 `<uni-collapse>` 时，应避免使用 `<uni-list-item>`，否则可能导致组件无法正常显示。 - 如果需要对表单进行分组，可以使用 `<uni-group>` 包裹不同的表单项，以增强视觉层次感[^3]。 ---