QaUI

# 列表 list

# 描述

以列表的形式展示文字、图片、段落

# 使用效果

# 使用方法

在.ux文件中引入组件

<import name="q-list" src="qaui/src/components/list/index"></import>
1

# 示例

<template>
  <div class="qaui-wrap">
    <q-list
      title="列表标题"
      data="{{ listData }}"
      onitem-tap="itemTap"
      onsamll-btn-tap="smallBtnTap"
      onswitch-tap="switchTap"
    ></q-list>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
export default {
  data() {
    return {
      listData: [
        {
          title: '标题文字',
        },
        {
          title: '标题文字',
          extra: 'rightArrow',
        },
        {
          title: '标题文字',
          rightText: '结果文字',
        },
        {
          title: '标题文字',
          rightText: '结果文字',
          extra: 'rightArrow',
        },
        {
          title: '标题文字',
          extra: 'switch',
          switchValue: true,
        },
        {
          title: '标题文字',
          extra: 'button',
          rightBtnText: '按钮',
        },
        {
          title: '标题文字1',
          iconType: 'bill-fill',
          extra: 'rightArrow',
        },
        {
          title: '标题文字1',
          iconType: 'bill-fill',
          rightText: '结果文字',
          extra: 'rightArrow',
        },
        {
          title: '标题文字1',
          iconType: 'bill-fill',
          extra: 'switch',
          switchValue: true,
        },
        {
          title: '标题文字4',
          thumb: '../../common/logo.png',
        },
        {
          title: '标题文字',
          description: '这是一段描述文字',
        },
        {
          title: '标题文字',
          description: '这是一段描述文字',
          extra: 'rightArrow',
        },
        {
          title: '标题文字',
          description: '这是一段描述文字',
          rightText: '结果文字',
        },
        {
          title: '标题文字',
          description: '这是一段描述文字',
          extra: 'rightArrow',
          rightText: '结果文字',
        },
        {
          title: '标题文字',
          description: '这是一段描述文字',
          extra: 'switch',
          switchValue: true,
        },
        {
          title: '标题文字',
          description: '这是一段描述文字',
          extra: 'button',
          rightBtnText: '按钮',
        },
        {
          title: '标题文字1',
          iconType: 'bill-fill',
          description: '这是一段描述文字',
          extra: 'rightArrow',
        },
        {
          title: '标题文字2',
          description: '这是一段描述文字2',
          iconType: 'bill-fill',
          rightText: '结果文字',
          extra: 'rightArrow',
        },
        {
          title: '标题文字2',
          description: '这是一段描述文字2',
          iconType: 'bill-fill',
          extra: 'switch',
          switchValue: true,
        },
        {
          title: '标题文字2',
          description: '这是一段描述文字2',
          iconType: 'bill-fill',
          extra: 'button',
          rightBtnText: '按钮',
        },
        {
          title: '标题文字3',
          description: '这是一段描述文字2',
          thumb: '../../common/logo.png',
        },
      ],
    }
  },

  itemTap(data) {
    const index = data.detail.index
    this.listData[index].title = `已选中第${index}行`
  },

  smallBtnTap(data) {
    const index = data.detail.index
    this.listData[index].title = `选中小按钮${index}`
  },

  switchTap(data) {
    const index = data.detail.index
    this.listData[index].title = `选中switch按钮${index}`
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

# API

# 组件属性

属性 类型 默认值 说明
data Array [] 列表数据源

data 内对象的属性说明

属性 类型 说明
title String 列表的标题
description String 列表的描述文字
iconType String 列表左侧的图标类型，详情见 icon 组件
thumb String 列表左侧的缩略图路径
extra String 额外内容,展示在列表的最右侧,可选值有 'rightArrow' | 'switch' | 'button'
rightBtnText String 列表右侧按钮的文字
rightText String 列表右侧的文字
switchValue Boolean 列表右侧 switch 的初始 Value 值

# 组件事件

事件名称 事件描述 返回值
itemTap 点击列表项时触发 {detail：{index: 当前点击项的索引}}
smallBtnTap 当 extra 为 'button' 时，点击右侧按钮时触发 {detail：{index: 当前点击项的索引}}
switchTap 当 extra 为 'switch' 时，点击右侧 switch 组件时触发 {detail：{index: 当前点击项的索引, active: 当前 switch 的 value 值}}

← 步骤条 steps →