tui-list-cell 列表Item 开源组件

介绍

可设置点击效果，设置是否显示箭头，也可以搭配 tui-list-view 使用，tui-list-view 可以为 tui-list-cell 提供上下外边框。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell.vue"
export default {
	components:{
		tuiListCell
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-list-cell": "/components/thorui/tui-list-cell/tui-list-cell"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

不带箭头，无点击效果头

通过 hover 属性设置点击效果，arrow 属性设置是否显示箭头。

<!--uni-app-->
<tui-list-view title="不带箭头，无点击效果" color="#777">
	<tui-list-cell :hover="false" :arrow="false">
		不带箭头，无点击效果
	</tui-list-cell>
</tui-list-view>

<!--微信小程序 （arrow默认值为false，可不设置）-->
<tui-list-view title="不带箭头，无点击效果" color="#777">
	<tui-list-cell hover="{{false}}">
		不带箭头，无点击效果
	</tui-list-cell>
</tui-list-view>

带箭头，有点击效果

通过 hover 属性设置点击效果，arrow 属性设置是否显示箭头。

<!--hover 默认为true，所以不需要设置-->
<tui-list-view title="带箭头，有点击效果" color="#777">
	<tui-list-cell arrow>
		带箭头，有点击效果
	</tui-list-cell>
</tui-list-view>

Slots

插槽名称	说明
default	标签显示内容，按需插入自定义内容

Props

属性名	类型	描述	默认值
arrow	Boolean	是否显示右箭头	false
arrowColor	String	箭头颜色，V2.8.0+之后调整，需传具体颜色值	#c0c0c0
hover	Boolean	是否有点击效果	true
unlined	Boolean	隐藏线条	false
lineColor V2.8.0+	String	线条颜色	#eaeef1
lineLeft	Number, String	线条左偏移距离，单位rpx，V2.8.0+之后调整，需传具体值	30
lineRight	Number, String	线条右偏移距离，单位rpx，V2.8.0+之后调整，需传具体值	0
padding	String	内边距	26rpx 30rpx
marginTop V2.9.0+	Number, String	margin-top值，单位rpx	0
marginBottom V2.9.0+	Number, String	margin-bottom值，单位rpx	0
backgroundColor	String	背景颜色	#fff
size	Number	字体大小	28
color	String	字体颜色	#333
radius V2.2.0+	Number,String	圆角值，单位rpx，V2.20+调整，之前设置废弃	0
arrowRight	Number, String	箭头右偏移距离，单位rpx，V2.8.0+之后调整，需传具体值	30
index	Number	索引	0

Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
click	点击事件，点击标签时触发	{index: Number}

预览

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码