跳转到内容
蓝河文档馆 蓝河文档馆

vw-list

vw-list

Section titled “vw-list”

列表包含一系列连续的列表项，可以呈现文本、图标等内容。 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）

属性

Section titled “属性”
名称类型默认值必填描述
title<string>列表是列表的标题
listArray<Array>-是列表数据数组
scrollbar<boolean>true否是否启用滚动条
type<string>normal否设置列表的的布局方式，值为 normal（正常列表）或 fisheye（鱼眼列表）（只有 vw-list 生效）
remind<boolean>false否是否显示红点（只有 vw-list 支持）
buttons<Array>-是按钮（只有 vw-list-checkbox 和 vw-list-icon-checkbox 支持）

listArray 的成员为 Object，需要填哪些必填属性根据 list 类型确定，可以包含的属性有：

Section titled “listArray 的成员为 Object，需要填哪些必填属性根据 list 类型确定，可以包含的属性有：”
名称类型默认值必填描述
icon<string>-根据 list 类型确定列表选项的图标路径
title<string>-是列表选项的标题
des<string>-根据 list 类型确定列表选项的辅助文本
checked<boolean>true根据 list 类型确定列表选项的 switch/radio/checkbox 开关状态
index<number>-根据 list 类型确定列表选项的序号
disabled<boolean>false否列表选项是否为禁用状态
widgetDisabled<boolean>false否列表右侧有 switch/radio/checkbox 时，用来仅禁用右侧的部件但文字不会置灰

事件

Section titled “事件”
名称回调参数说明
itemclick{index}列表选项点击事件
widgetclick{index, event}右边小组件点击事件（只在有 checkbox、radio、switch 组件的时候有此事件，event 和对应的原生组件点击事件一致）
back无列表标题点击事件
animationend{index}单选点击事件（目前只有带 radio 的 list 有）

vw-list 用法

Section titled “vw-list 用法”

vw-list

<template>
  <vw-list
    list-array="{{listArray}}"
    onitemclick="handleClick"
    title="列表"
    onback="handleBack"
    onscrollbottom="handleBottom"
  ></vw-list>
</template>


<script>
  export default {
    data: {
      listArray: [
        {
          icon: '/assets/images/setupSound.png',
          title: '图标+标题+箭头',
        },
        {
          icon: '/assets/images/setupSound.png',
          title: '图标+标题+箭头',
        },
        {
          icon: '/assets/images/setupSound.png',
          title: '图标+标题+箭头',
        },
      ],
    },
  }
</script>

vw-list-radio

<template>
  <vw-list-radio
    list-array="{{listArray}}"
    onitemclick="handleClick"
    onwidgetclick="handleWidgetClick"
    title="单选列表"
    onback="handleBack"
    onscrollbottom="handleBottom"
  ></vw-list-radio>
</template>
<script>
  export default {
    data: {
      listArray: [
        {
          title: '无图标单选',
          checked: false,
        },
        {
          title: '无图标单选',
          checked: true,
        },
        {
          title: '无图标单选',
          checked: false,
        },
      ],
    },
  }
</script>

vw-list-icon-radio

<template>
  <vw-list-icon-radio
    list-array="{{listArray}}"
    onitemclick="handleClick"
    onwidgetclick="handleWidgetClick"
    title="有图标单选列表"
    onback="handleBack"
    onscrollbottom="handleBottom"
  ></vw-list-icon-radio>
</template>
<script>
  export default {
    data: {
      listArray: [
        {
          icon: '/assets/images/setupSound.png',
          title: '有图标单选列表',
          checked: false,
        },
        {
          icon: '/assets/images/setupSound.png',
          title: '有图标单选列表',
          checked: true,
        },
        {
          icon: '/assets/images/setupSound.png',
          title: '有图标单选列表',
          checked: false,
        },
      ],
    },
  }
</script>

vw-list-radio-left

<template>
  <vw-list-radio-left
    list-array="{{listArray}}"
    onitemclick="handleClick"
    onwidgetclick="handleWidgetClick"
    title="左侧单选列表"
    onback="handleBack"
    onscrollbottom="handleBottom"
  ></vw-list-radio-left>
</template>
<script>
  export default {
    data: {
      listArray: [
        {
          title: '左侧单选',
          checked: false,
        },
        {
          title: '左侧单选',
          checked: true,
        },
        {
          title: '左侧单选',
          checked: false,
        },
      ],
    },
  }
</script>

vw-list-des-radio-left

<template>
  <vw-list-des-radio-left
    list-array="{{listArray}}"
    onitemclick="handleClick"
    onwidgetclick="handleWidgetClick"
    title="左侧单选辅助文本列表"
    onback="handleBack"
    onscrollbottom="handleBottom"
  ></vw-list-des-radio-left>
</template>
<script>
  export default {
    data: {
      listArray: [
        {
          title: '左侧单选带辅助文本',
          checked: false,
          des: '辅助文本',
        },
        {
          title: '左侧单选带辅助文本',
          checked: true,
          des: '辅助文本',
        },
        {
          title: '左侧单选带辅助文本',
          checked: false,
          des: '辅助文本',
        },
      ],
    },
  }
</script>

vw-list-checkbox

<template>
  <vw-list-checkbox
    list-array="{{listArray}}"
    onitemclick="handleClick"
    onwidgetclick="handleWidgetClick"
    title="多选列表"
    onback="handleBack"
    onscrollbottom="handleBottom"
  ></vw-list-checkbox>
</template>
<script>
  export default {
    data: {
      listArray: [
        {
          title: '无图标多选',
          checked: true,
        },
        {
          title: '无图标多选',
          checked: true,
        },
        {
          title: '无图标多选',
          checked: false,
        },
      ],
    },
  }
</script>

vw-list-icon-checkbox

<template>
  <vw-list-icon-checkbox
    list-array="{{listArray}}"
    onitemclick="handleClick"
    onwidgetclick="handleWidgetClick"
    title="有图标多选列表"
    onback="handleBack"
    onscrollbottom="handleBottom"
  ></vw-list-icon-checkbox>
</template>
<script>
  export default {
    data: {
      listArray: [
        {
          icon: '/assets/images/setupSound.png',
          title: '有图标多选',
          checked: true,
        },
        {
          icon: '/assets/images/setupSound.png',
          title: '有图标多选',
          checked: true,
        },
        {
          icon: '/assets/images/setupSound.png',
          title: '有图标多选',
          checked: false,
        },
      ],
    },
  }
</script>