--- title: 'vw-list' description: '列表包含一系列连续的列表项，可以呈现文本、图标等内容。 list 只提供每个选项相同的列表，如果每个选项不同可使用 list-item 类组件进行实现。' lastUpdated: 2025-04-30T12:56:55.000Z --- 列表包含一系列连续的列表项，可以呈现文本、图标等内容。 list 只提供每个选项相同的列表，如果每个选项不同可使用 list-item 类组件进行实现。 参考当前需求，将列表分为以下几种： 1.vw-list:最常用的列表，包含图标、标题、箭头（listArray 子项必填选项为 icon、title，list 属性可选 type 为 normal 或 fisheye） 2.vw-list-radio:右侧带单选按钮的列表（listArray 子项必填选项为 title、checked） 3.vw-list-icon-radio:左侧为图标，右侧带单选按钮的列表（listArray 子项必填选项为 icon、title、checked） 4.vw-list-radio-left:左侧带单选按钮的列表（listArray 子项必填选项为 title、checked） 5.vw-list-des-radio-left:左侧带单选按钮且带辅助文本的列表（listArray 子项必填选项为 title、des、checked） 6.vw-list-checkbox:右侧带多选按钮的列表（listArray 子项必填选项为 title、checked） 7.vw-list-icon-checkbox:左侧为图标，右侧带多选按钮的列表（listArray 子项必填选项为 icon、title、checked） ### 属性 | 名称 | 类型 | 默认值 | 必填 | 描述 | | --- | --- | --- | --- | --- | | title | `` | 列表 | 是 | 列表的标题 | | listArray | `` | \- | 是 | 列表数据数组 | | scrollbar | `` | true | 否 | 是否启用滚动条 | | type | `` | normal | 否 | 设置列表的的布局方式，值为 normal（正常列表）或 fisheye（鱼眼列表）（只有 vw-list 生效） | | remind | `` | false | 否 | 是否显示红点（只有 vw-list 支持） | | buttons | `` | \- | 是 | 按钮（只有 vw-list-checkbox 和 vw-list-icon-checkbox 支持） | #### listArray 的成员为 Object，需要填哪些必填属性根据 list 类型确定，可以包含的属性有： | 名称 | 类型 | 默认值 | 必填 | 描述 | | --- | --- | --- | --- | --- | | icon | `` | \- | 根据 list 类型确定 | 列表选项的图标路径 | | title | `` | \- | 是 | 列表选项的标题 | | des | `` | \- | 根据 list 类型确定 | 列表选项的辅助文本 | | checked | `` | true | 根据 list 类型确定 | 列表选项的 switch/radio/checkbox 开关状态 | | index | `` | \- | 根据 list 类型确定 | 列表选项的序号 | | disabled | `` | false | 否 | 列表选项是否为禁用状态 | | widgetDisabled | `` | false | 否 | 列表右侧有 switch/radio/checkbox 时，用来仅禁用右侧的部件但文字不会置灰 | ### 事件 | 名称 | 回调参数 | 说明 | | --- | --- | --- | | itemclick | {index} | 列表选项点击事件 | | widgetclick | {index, event} | 右边小组件点击事件（只在有 checkbox、radio、switch 组件的时候有此事件，event 和对应的原生组件点击事件一致） | | back | 无 | 列表标题点击事件 | | animationend | {index} | 单选点击事件（目前只有带 radio 的 list 有） | ### vw-list 用法 **vw-list** ```html ``` **vw-list-radio** ```html ``` **vw-list-icon-radio** ```html ``` **vw-list-radio-left** ```html ``` **vw-list-des-radio-left** ```html ``` **vw-list-checkbox** ```html ``` **vw-list-icon-checkbox** ```html ```