三、核心组件详解
iView Weapp提供了40+个组件，以下是开发中最常用的核心组件。
3.1 布局组件
3.1.1 Grid栅格系统
Grid栅格组件用于实现响应式布局，将屏幕划分为24等份：
<i-row>
<i-col span="12">
<view class="grid-demo">6/12</view>
</i-col>
<i-col span="12">
<view class="grid-demo">6/12</view>
</i-col>
</i-row>
<i-row>
<i-col span="8">
<view class="grid-demo">8/24</view>
</i-col>
<i-col span="8">
<view class="grid-demo">8/24</view>
</i-col>
<i-col span="8">
<view class="grid-demo">8/24</view>
</i-col>
</i-row>
i-row支持gutter属性设置列间距，i-col支持span属性设置占据的列数。
3.1.2 Panel面板
Panel用于将页面内容分组：
<i-panel title="标题">
<view class="panel-content">
面板内容
</view>
</i-panel>
3.2 基础组件
3.2.1 Button按钮
Button是最常用的交互组件，iView Weapp提供了丰富的按钮样式：
<!-- 按钮类型 -->
<i-button type="primary">主要按钮</i-button>
<i-button type="default">默认按钮</i-button>
<i-button type="warning">警告按钮</i-button>
<i-button type="error">错误按钮</i-button>
<i-button type="success">成功按钮</i-button>
<!-- 按钮尺寸 -->
<i-button size="large">大号按钮</i-button>
<i-button size="default">默认按钮</i-button>
<i-button size="small">小号按钮</i-button>
<!-- 块级按钮 -->
<i-button type="primary" long>块级按钮</i-button>
<!-- 加载状态 -->
<i-button type="primary" loading>加载中</i-button>
<!-- 禁用状态 -->
<i-button type="primary" disabled>禁用按钮</i-button>
3.2.2 Cell单元格
Cell是列表布局的基础组件，常用于设置页面、信息展示等场景：
<!-- 基础单元格 -->
<i-cell title="标题" value="内容" />
<!-- 带图标的单元格 -->
<i-cell title="标题" icon="setting" />
<!-- 带箭头的单元格（用于导航） -->
<i-cell title="标题" is-link value="详情" />
<!-- 带说明文字的单元格 -->
<i-cell title="标题" label="说明文字" value="内容" />
<!-- 单元格组 -->
<i-cell-group>
<i-cell title="选项1" is-link />
<i-cell title="选项2" is-link />
</i-cell-group>
3.2.3 Icon图标
iView Weapp内置了大量常用图标：
<i-icon type="success" size="24" color="#19be6b" />
<i-icon type="close" size="24" color="#ed3f14" />
<i-icon type="information" size="24" color="#2d8cf0" />
3.3 表单组件
3.3.1 Input输入框
Input组件需要注意：必须设置maxlength属性，否则在开发工具中可能无法输入。
<i-input
title="用户名"
placeholder="请输入用户名"
maxlength="20"
bindchange="handleUsernameChange"
/>
<i-input
title="密码"
type="password"
placeholder="请输入密码"
maxlength="20"
/>
常见问题：当不设置maxlength时，组件的maxlength默认可能为0，导致输入内容被清空。务必为每个Input组件设置合理的maxlength值。
3.3.2 Radio/Checkbox单选框/复选框
<!-- 单选 -->
<i-radio-group bindchange="handleRadioChange">
<i-radio value="male" checked>男</i-radio>
<i-radio value="female">女</i-radio>
</i-radio-group>
<!-- 多选 -->
<i-checkbox-group bindchange="handleCheckboxChange">
<i-checkbox value="apple" checked>苹果</i-checkbox>
<i-checkbox value="banana">香蕉</i-checkbox>
</i-checkbox-group>
3.4 反馈组件
3.4.1 Toast轻提示
<i-toast id="toast" />
this.selectComponent('#toast').show({
type: 'success',
duration: 2000,
message: '操作成功'
});
3.4.2 Modal模态框
<i-modal
title="提示"
visible="{
{visible}}"
bindok="handleOk"
bindcancel="handleCancel"
>
<view>确定要执行此操作吗？</view>
</i-modal>
3.4.3 ActionSheet动作面板
<i-action-sheet
visible="{
{actionVisible}}"
actions="{
{actions}}"
bindcancel="handleCancel"
bindclick="handleClick"
/>
Page({
data: {
actions: [
{ name: '选项一', value: 1 },
{ name: '选项二', value: 2 },
{ name: '选项三', value: 3 }
]
}
});
3.5 导航组件
3.5.1 Tabs标签页
<i-tabs current="{
{current}}" bindchange="handleTabChange">
<i-tab key="tab1" title="标签一">
<view>内容一</view>
</i-tab>
<i-tab key="tab2" title="标签二">
<view>内容二</view>
</i-tab>
</i-tabs>
iView Weapp的Tabs组件支持通过i-class外部类进行样式定制，主题有black和white两种样式可选。
3.5.2 Steps步骤条
<i-steps current="{
{current}}">
<i-step title="步骤一" />
<i-step title="步骤二" />
<i-step title="步骤三" />
</i-steps>
四、事件处理机制
4.1 事件委托的设计理念
iView Weapp采用了事件委托的设计模式，将事件处理程序绑定到父元素而非每个子元素。当子元素触发事件时，事件会冒泡到父元素，由父元素统一处理。
事件委托的核心优势：
4.2 索引列表组件的委托实现
iView Weapp的索引列表组件通过handlerFixedTap方法实现了高效的事件委托：
handlerFixedTap(event) {
const eindex = event.currentTarget.dataset.index;
const item = this.getCurrentItem(eindex);
this.setData({
scrollTop: item.top,
currentName: item.currentName,
isTouches: true
});
this.triggerEvent('change', {
index: eindex,
current: item.currentName
});
}
在WXML中通过data-index传递索引：
<view bindtap="handlerFixedTap" data-index="{
{index}}">
索引项内容
</view>
4.3 事件冒泡控制
合理使用bind和catch控制事件传播：
bind：允许事件冒泡，事件会继续向上传递
catch：阻止事件冒泡，事件不会继续向上传递
<!-- 事件会冒泡 -->
<view bindtap="parentTap">
<button bindtap="childTap">点击我（会冒泡）</button>
</view>
<!-- 事件不会冒泡 -->
<view bindtap="parentTap">
<button catchtap="childTap">点击我（不会冒泡）</button>
</view>
