Tuniao UI Uniapp V3TnList-列表
该组件用于展示列表数据
组件位置
typescript
import TnListItem from '@tuniao/tnui-vue3-uniapp/components/list/src/list-item.vue'import TnListItem from '@tuniao/tnui-vue3-uniapp/components/list/src/list-item.vue'typescript
import TnListItem from '@/uni_modules/tuniaoui-vue3/components/list/src/list-item.vue'import TnListItem from '@/uni_modules/tuniaoui-vue3/components/list/src/list-item.vue'平台差异说明
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|---|---|---|---|---|
| √ | √ | √ | √ | 适配中 |
基础使用
在默认的slots中输入需要显示的内容即可
vue
<template>
<TnListItem> 联系客服 </TnListItem>
</template><template>
<TnListItem> 联系客服 </TnListItem>
</template>修改列表项样式
- 通过
width设置列表项的宽度，默认单位为 rpx，可以传递带单位的字符串 - 通过
height设置列表项的高度，默认单位为 rpx，可以传递带单位的字符串 - 通过
bg-color设置列表项的背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba - 通过
text-color设置列表项的文字颜色，支持图鸟内置的颜色值、hex、rgb、rgba - 通过
font-size设置列表项的字体大小，默认单位为 rpx，可以传递带单位的字符串 - 通过
radius设置是否显示带圆角的列表项 - 通过
bottom-border设置列表项是否显示下边框 - 通过
bottom-border-indent设置列表项下边框两边是否有缩进
修改列表项的宽高、背景颜色、字体颜色
vue
<template>
<TnListItem
width="90%"
height="100rpx"
bg-color="tn-gray-light"
text-color="tn-grey"
>
联系客服
</TnListItem>
</template><template>
<TnListItem
width="90%"
height="100rpx"
bg-color="tn-gray-light"
text-color="tn-grey"
>
联系客服
</TnListItem>
</template>设置带圆角的列表项
vue
<template>
<TnListItem radius> 联系客服 </TnListItem>
</template><template>
<TnListItem radius> 联系客服 </TnListItem>
</template>设置带下边框的列表项
vue
<template>
<TnListItem bottom-border> 联系客服 </TnListItem>
</template><template>
<TnListItem bottom-border> 联系客服 </TnListItem>
</template>设置带下边框并且两边缩进的列表项
vue
<template>
<TnListItem bottom-border bottom-border-indent> 联系客服 </TnListItem>
</template><template>
<TnListItem bottom-border bottom-border-indent> 联系客服 </TnListItem>
</template>自定义列表项的样式和类
- 通过
custom-class设置列表项的类名 - 通过
custom-style设置列表项的样式
vue
<template>
<TnListItem :custom-style="{ padding: '20rpx' }"> 联系客服 </TnListItem>
</template><template>
<TnListItem :custom-style="{ padding: '20rpx' }"> 联系客服 </TnListItem>
</template>设置显示右边的图标
vue
<template>
<TnListItem right-icon="right"> 联系客服 </TnListItem>
</template><template>
<TnListItem right-icon="right"> 联系客服 </TnListItem>
</template>API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| width | 列表项宽度，默认单位为 rpx，可以传入带单位的尺寸值 | String | - | - |
| height | 列表项高度，默认单位为 rpx，可以传入带单位的尺寸值 | String | - | - |
| font-size | 列表文字大小，默认单位为 rpx，可以传入带单位的尺寸值 | String | - | - |
| bg-color | 背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba | String | - | - |
| text-color | 文字颜色，支持图鸟内置的颜色值、hex、rgb、rgba | String | - | - |
| right-icon | 设置列表项右边显示的图标 | String | - | 图标有效值 |
| right-icon-color | 右图标颜色，支持图鸟内置的颜色值、hex、rgb、rgba | String | - | - |
| radius | 是否为圆角列表项 | Boolean | false | true |
| bottom-border | 是否显示底部边框 | Boolean | false | true |
| bottom-border-indent | 底部边框的长度是否向两边缩进 | Boolean | false | true |
| hover-class | 点击时触发的类 | String | - | - |
| custom-style | 在外部自定义组件样式 | CSSProperties | {} | - |
| custom-class | 在外部作用于组件的类 | String | - | - |
Emits
| 事件名 | 说明 | 类型 |
|---|---|---|
| click | 列表项点击事件 | () => void |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |