tm-listitem 列表
这是一个非常强大的列表组件
属性众多，依靠强有力的css库，你几乎可以做出时下众多流行漂亮的列表组件。几乎是通用的万能胶列表组件。
动态向列表组tm-grouplist中添加tm-listitem需要使用ref函数inits()重新渲染。静态的无需此动作.
这不是我的问题。在h5是没问题的。但小程序需要调用。因为这是uniapp就不支持子组件的dom更新事件。我也无解。只能这样处理。我个人 建议不需要使用tm-grouplist，因为这个组件，只是动态的帮你设置了下样式而已。
请仔细理解pros属性表和插槽的使用。
🎉目录导航
👉使用方法,跟数1,2,3一样简单
<tm-listitem title="收藏" left-icon="icon-collection-fill" show-left-icon left-icon-color="pink"></tm-listitem>
1
👉完整的示例
可以复制到页面直接运行
<template>
<view :class="$tm.vx.state().tmVuetify.black ? 'black bk' : ''">
<tm-menubars title="列表及组" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
<tm-sheet color="blue text"><view class="text-size-s text-weight-b ">基本示例</view></tm-sheet>
<tm-listitem
:left-icon-size="80"
value="打开"
title="支付"
label="微信和支付宝微信和支付宝微信和支付宝微信和支付宝"
left-icon="https://cdn.roundicons.com/wp-content/uploads/2017/09/Lego-freebie-icon.png"
show-left-icon
></tm-listitem>
<tm-listitem title="收藏" left-icon="icon-collection-fill" show-left-icon left-icon-color="pink"></tm-listitem>
<tm-sheet color="blue text"><view class="text-size-s text-weight-b ">个性化</view></tm-sheet>
<tm-listitem value="26" :round="24" :shadow="12" title="收藏" left-icon="icon-collection-fill" show-left-icon left-icon-color="pink"></tm-listitem>
<tm-listitem value="99" :round="3" :shadow="0" border title="支付" left-icon="icon-QQ" show-left-icon></tm-listitem>
<tm-grouplist title="列表组" title-theme="blue text" :shadow="24" :round="10" :padding="[42, 42]">
<tm-listitem title="支付" left-icon="icon-QQ" show-left-icon></tm-listitem>
<tm-listitem title="收藏" left-icon="icon-collection-fill" show-left-icon left-icon-color="pink"></tm-listitem>
<tm-listitem title="朋友圈" left-icon="icon-user-fill" show-left-icon left-icon-color="green"></tm-listitem>
</tm-grouplist>
<tm-grouplist ref="listitem" title="列表组" title-theme="blue text" :shadow="24" :round="10" :padding="[42, 42]">
<tm-listitem v-for="(item, index) in indexlen" :key="index" title="支付" left-icon="icon-QQ" show-left-icon></tm-listitem>
</tm-grouplist>
<view
class="ma-32 pa-24"
@click="
indexlen = indexlen == 4 ? 2 : 4;
$refs.listitem.inits();
"
>
<tm-button>动态添加列表组件的项目</tm-button>
<view>动态添加list需要再次，调用ref渲染列表组$refs.listitem.inits()</view>
</view>
<tm-grouplist @change="test" title="拓展列表" title-theme="blue text">
<tm-listitem group title="点击我可以展开内容" left-icon="icon-QQ" show-left-icon>
<template v-slot:group>
<tm-sheet :margin="[0, 0]" :shadow="0" color="blue text"><view>这里面可以放任意内容、</view></tm-sheet>
</template>
</tm-listitem>
<tm-listitem group title="可以无限级嵌套" left-icon="icon-QQ" show-left-icon>
<template v-slot:group>
<tm-sheet :margin="[0, 0]" :shadow="0" color="blue text">
<view>这里面可以放任意内容、</view>
<tm-listitem group title="点击我可以展开内容" left-icon="icon-QQ" show-left-icon>
<template v-slot:group>
<tm-sheet :margin="[0, 0]" :shadow="0" color="blue text">
<view>这里面可以放任意内容、</view>
<tm-listitem group title="点击我可以展开内容" left-icon="icon-QQ" show-left-icon>
<template v-slot:group>
<tm-sheet :margin="[0, 0]" :shadow="0" color="blue text"><view>这里面可以放任意内容、</view></tm-sheet>
</template>
</tm-listitem>
</tm-sheet>
</template>
</tm-listitem>
</tm-sheet>
</template>
</tm-listitem>
</tm-grouplist>
<tm-listitem group title="也可以独立拓展" left-icon="icon-QQ" show-left-icon>
<template v-slot:group>
<tm-sheet :margin="[0, 0]" :shadow="0" color="blue text"><view>这里面可以放任意内容、</view></tm-sheet>
</template>
</tm-listitem>
<tm-grouplist black title="暗黑列表组" title-theme="blue text">
<tm-listitem black title="支付" left-icon="icon-QQ" show-left-icon></tm-listitem>
<tm-listitem black title="收藏" left-icon="icon-collection-fill" show-left-icon left-icon-color="pink"></tm-listitem>
<tm-listitem black title="朋友圈" left-icon="icon-user-fill" show-left-icon left-icon-color="green"></tm-listitem>
</tm-grouplist>
<view style="height: 100upx;"></view>
</view>
</template>
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
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
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
👉props属性表
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| value | String | - | '' | 右边文字 |
| title | String | - | '' | 左边标题 |
| title-color | String | - | 'grey-darken-3' | 标题颜色,暗黑模式下，无效。 |
| font-size | number | - | 32 | 标题大小 |
| label | String | - | '' | 标题下方文字说明 |
| url | String | - | '' | 打开的链接。不空空时，将会打开链接，如果发生错误，会触发error事件 |
| open-type | String | navigate / navigateBack /reLaunch / redirect / switchTab | 'navigate' | 打开的链接的方式 |
| class-style | String | - | '' | 自定义类 |
| left-icon-color | String | 任意主题名称 | primary | 左图标主题色 |
| left-icon | String | 任意图标名称或图片地址 | primary | 左图标名称，可以是图片地址 |
| right-icon | String | 任意图标名称或图片地址 | icon-angle-right | 右图标名称，可以是图片地址 |
| right-icon-color | String | 任意主题名称 | primary | 右图标主题色 |
| bg-color | String | 任意主题名称 | '' | 自定义背景色 |
| disabled-color | String | 任意主题名称 | '' | 禁用时的背景色 |
| color | String | 任意主题名称 | 'white' | 主题色背景色 |
| left-icon-size | Number | - | 38 | 左边图标大小 |
| right-icon-size | Number | - | 24 | 右边图标大小 |
| round | Number | 0-25 | 4 | 单位upx, 外部圆角 |
| margin | Array<Number> | 0-25 | [32,32] | 单位upx, 外间距 |
| padding | Array<Number> | 0-25 | [32,32] | 单位upx, 内间距 |
| shadow | Number | 0-50 | 6 | 单位upx,投影 |
| dense | Boolean | true/false | false | 去除外间距 |
| border | Boolean | true/false | false | 开启边线模式 |
| border-bottom | Boolean | true/false | false | 是否显示下划线 |
| black | Boolean | true/false | false | 暗黑模式 |
| show-left-icon | Boolean | true/false | false | 是否显示左边图标 |
| show-right-icon | Boolean | true/false | true | 是否显示右边图标 |
| group | Boolean | true/false | false | 是否开启拓展功能，点击展开内容。slot:group的内容 |
| disabled | Boolean | true/false | false | 是否禁用 |
👉Slot插槽属性表
| 属性名称 | 类型 | 数据 | 说明 |
|---|---|---|---|
| default | String | title | 标题数据 |
| label | String | label | 同上方pros的label |
| left | Object | icon={ icon: leftIcon, color: leftIconColor, fontsize: leftIconSize } | 左边图标插槽 |
| rightValue | String | value | 同上方pros的value |
| rightIcon | String | icon | 同上方pros的value |
| group | Boolean | show | 当前pros中启用:group=true,时启用此插槽，并展示拓展内容，具体见示例 |
👉事件
| 事件名称 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| @change | true/false | Boolean | 当group为true时才会触发事件，显示和隐藏扩展内容。 |
| @click | - | - | 点击组件时触发。 |
| @error | 错误信息 | - | 当url不为空时，打开出错时发出。 |
👉列表组属性及参数
特别提醒
它不能单独使用，必须和tm-listitem配合使用。
如果你想在列表组在通过v-if来控制listitem这样做是不明智的。你应该改用v-show。
技巧
(可嵌套使用)需要配合tm-listitem使用,可以无限制嵌套
用法见上方示例。
props属性表
| 属性名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| title | String | - | '' | 标题 |
| title-theme | String | - | 'primary' | 标题的主题色彩名 |
| margin | Number | 0-50 | 32 | 单位upx,外间距 |
| shadow | Number | 0-25 | 10 | 单位upx,投影 |
| round | Number | 0-25 | 4 | 单位upx, 外部圆角 |
| black | Boolean | true/false | false | 暗黑模式 |
| border-bottom | Boolean | true/false | true | 是否显示底边线 |
| font-size | String | xxs/xs/s/n/g/lg/xl | n | 标题大小 |
事件
| 事件名称 | 返回参数 | 返参类型 | 说明 |
|---|---|---|---|
| @change | Index | Number | 点击了列表。 |
基础示例
<tm-grouplist @change="test" title="拓展列表" title-theme="blue text">
<tm-listitem group title="点击我可以展开内容" left-icon="icon-QQ" show-left-icon>
<template v-slot:group>
<tm-sheet :margin="[0, 0]" :shadow="0" color="blue text"><view>这里面可以放任意内容、</view></tm-sheet>
</template>
</tm-listitem>
<tm-listitem group title="可以无限级嵌套" left-icon="icon-QQ" show-left-icon>
<template v-slot:group>
<tm-sheet :margin="[0, 0]" :shadow="0" color="blue text">
<view>这里面可以放任意内容、</view>
<tm-listitem group title="点击我可以展开内容" left-icon="icon-QQ" show-left-icon>
<template v-slot:group>
<tm-sheet :margin="[0, 0]" :shadow="0" color="blue text">
<view>这里面可以放任意内容、</view>
<tm-listitem group title="点击我可以展开内容" left-icon="icon-QQ" show-left-icon>
<template v-slot:group>
<tm-sheet :margin="[0, 0]" :shadow="0" color="blue text"><view>这里面可以放任意内容、</view></tm-sheet>
</template>
</tm-listitem>
</tm-sheet>
</template>
</tm-listitem>
</tm-sheet>
</template>
</tm-listitem>
</tm-grouplist>
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
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
<script>
export default {
data() {
return {
}
},
methods: {
test(e){
console.log(e);
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
👉更新日志
2021年8月20日14:8:5 初始版本。