List 列表

列表组件，组件名：uni-list、uni-list-item，代码块： uList。

使用方式：

在 script 中引用组件 

  1. import uniList from '@/components/uni-list/uni-list.vue'
  2. import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
  3. export default {
  4.     components: {uniList,uniListItem}
  5. }

List 一般用法

  1. <uni-list>
  2.     <uni-list-item title="标题文字" show-arrow="false"></uni-list-item>
  3.     <uni-list-item title="标题文字"></uni-list-item>
  4.     <uni-list-item title="标题文字" show-badge="true" badge-text="12"></uni-list-item>
  5.     <uni-list-item title="禁用状态" disabled="true" show-badge="true" badge-text="12"></uni-list-item>
  6. </uni-list>

带描述信息

  1. <uni-list>
  2.     <uni-list-item title="标题文字" note="描述信息"></uni-list-item>
  3.     <uni-list-item title="标题文字" note="描述信息" show-badge="true" badge-text="12"></uni-list-item>
  4. </uni-list>

包含图片

  1. <uni-list>
  2.     <uni-list-item title="标题文字" thumb="http://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png"></uni-list-item>
  3. </uni-list>

包含图标

  1. <uni-list>
  2.     <uni-list-item title="标题文字" 
  3.         show-extra-icon="true" 
  4.         :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}">
  5.     </uni-list-item>
  6. </uni-list>

显示Switch

  1. <uni-list>
  2.     <uni-list-item title="标题文字" show-switch="true" show-arrow="false"></uni-list-item>
  3. </uni-list>

uniListItem 属性说明：

属性名类型默认值说明
titleString-标题
noteString-描述
disabledBooleanfalse是否禁用
show-arrowBooleantrue是否显示箭头图标
show-badgeBooleanfalse是否显示数字角标
badge-textString-数字角标内容
badge-typeString-数字角标类型，参考Badge 数字角标
show-switchBooleanfalse是否显示Switch
switch-checkedBooleanfalseSwitch是否被选中
show-extra-iconBooleanfalse左侧是否显示扩展图标
extra-iconObject-扩展图标参数，格式为 {color: '#4cd964',size: '22',type: 'spinner'}，参考 Iocn 图标
thumbString-左侧缩略图，若thumb有值，则不会显示扩展图标

uniListItem 事件说明：

事件称名说明返回参数
click点击 uniListItem 触发事件-
switchChange点击切换 Switch 时触发{value:checked}

Tips