uniapp常用 ui组件

### UniApp 常用 UI 组件列表及使用方法 #### 1. 图标组件 `uni-icons` `uni-icons` 是用于显示图标的组件，支持多种内置图标样式。通过设置属性 `type` 来指定不同的图标类型。 ```html <template> <view> <uni-icons type="home" size="30"></uni-icons> </view> </template> <script> export default { } </script> ``` 此代码片段展示了如何创建一个大小为30px的家庭图标[^2]。 #### 2. 宫格组件 `uni-grid` 该组件适用于展示多个项目的网格布局，可通过配置项调整列数和其他外观特性。 ```html <template> <view> <uni-grid :column="3"> <uni-grid-item v-for="(item, index) in items" :key="index"> <!-- Grid item content --> </uni-grid-item> </uni-grid> </view> </template> <script> export default { data() { return { items: ['Item 1', 'Item 2', 'Item 3'] } } } </script> ``` 这段脚本实现了三列的宫格式排列，并循环渲染数据集合中的每一项。 #### 3. 卡片组件 `uni-card` 卡片是一种常见的信息容器，能够承载文字、图片等内容。可以通过简单的标签嵌套实现复杂的内容结构。 ```html <template> <view> <uni-card title="Card Title"> Card Content... </uni-card> </view> </template> ``` 上述例子说明了怎样快速搭建一张带有标题和正文内容的基础卡片。 #### 4. 导航条组件 `uni-nav-bar` 作为页面顶部的重要组成部分之一，导航栏通常用来放置应用名称或返回按钮等功能性元素。 ```html <template> <view> <uni-nav-bar left-icon="back" @click-left="goBack">Page Title</uni-nav-bar> </view> </template> <script> export default { methods: { goBack() { console.log('Go back'); } } } </script> ``` 这里给出了一个包含左侧箭头图标并绑定点击事件处理函数的例子。 #### 5. 列表组件 `uni-list / uni-list-item` 这两个组件配合使用可轻松构建各种类型的列表视图，如联系人列表、菜单选项等。 ```html <template> <view> <uni-list> <uni-list-item title="List Item 1"/> <uni-list-item title="List Item 2"/> </uni-list> </view> </template> ``` 以上实例呈现了一个由两个子项构成的基本列表。 #### 6. 输入框组件 `uni-easyinput` 简化版输入控件，适合于收集用户的短文本输入，比如姓名、电话号码等基本信息。 ```html <template> <view> <uni-easyinput placeholder="Enter your name here..."></uni-easyinput> </view> </template> ``` 这个模板定义了一行提示用户填写名字的地方。 #### 7. 弹窗组件 `uni-popup` 当需要向用户提供额外的信息或者请求确认操作时，可以考虑采用弹出层的形式展现给访客看。 ```html <template> <view> <button @click="showPopup = true">Show Popup</button> <uni-popup ref="popup" type="center"> This is a popup message. </uni-popup> </view> </template> <script> export default { data() { return { showPopup: false }; }, watch: { showPopup(val) { if (!val) this.$refs.popup.close(); else this.$nextTick(() => this.$refs.popup.open()); } } }; </script> ``` 最后一部分介绍了如何触发显示隐藏状态下的中心位置居中的消息框。