# List 列表

List:可设置点击效果,可设置是否显示箭头,可结合list-view使用

# 组件结构

<template>
	<view
		class="tui-list-class tui-list-cell"
		:class="[
			arrow ? 'tui-cell-arrow' : '',
			arrow && arrowRight ? '' : 'tui-arrow-right',
			unlined ? 'tui-cell-unlined' : '',
			lineLeft ? 'tui-line-left' : '',
			lineRight ? 'tui-line-right' : '',
			arrow && arrowColor ? 'tui-arrow-' + arrowColor : '',
			radius ? 'tui-radius' : ''
		]"
		:hover-class="hover ? 'tui-cell-hover' : ''"
		:style="{ backgroundColor: backgroundColor, fontSize: size + 'rpx', color: color, padding: padding }"
		:hover-stay-time="150"
		@tap="handleClick"
	>
		<slot></slot>
	</view>
</template>

# 组件脚本

<script>
	export default {
		name: 'tuiListCell',
		props: {
			//是否有箭头
			arrow: {
				type: Boolean,
				default: false
			},
			//箭头颜色 传值: white,gray,warning,danger
			arrowColor: {
				type: String,
				default: ''
			},
			//是否有点击效果
			hover: {
				type: Boolean,
				default: true
			},
			//隐藏线条
			unlined: {
				type: Boolean,
				default: false
			},
			//线条是否有左偏移距离
			lineLeft: {
				type: Boolean,
				default: true
			},
			//线条是否有右偏移距离
			lineRight: {
				type: Boolean,
				default: false
			},
			padding: {
				type: String,
				default: '26rpx 30rpx'
			},
			//背景颜色
			backgroundColor: {
				type: String,
				default: '#fff'
			},
			//字体大小
			size: {
				type: Number,
				default: 28
			},
			//字体颜色
			color: {
				type: String,
				default: '#333'
			},
			//是否加圆角
			radius: {
				type: Boolean,
				default: false
			},
			//箭头是否有偏移距离
			arrowRight: {
				type: Boolean,
				default: true
			},
			index: {
				type: Number,
				default: 0
			}
		},
		methods: {
			handleClick() {
				this.$emit('click', {
					index: this.index
				});
			}
		}
	};
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
arrow Boolean 是否显示右箭头 false
arrowColor String 箭头颜色 传值: white,gray,warning,danger,success ''
hover Boolean 是否有点击效果 true
unlined Boolean 隐藏线条 false
lineLeft Boolean 线条是否有左偏移距离 true
lineRight Boolean 线条是否有右偏移距离 false
padding String 内边距 26rpx 30rpx
backgroundColor String 背景颜色 #fff
size Number 字体大小 28
color String 字体颜色 #333
radius Boolean 是否加圆角 false
arrowRight Boolean 箭头是否有偏移距离 true
index Number 索引 0

# methods

名称 描述
@click 点击事件

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/list/list

# H5二维码

# 小程序二维码