更新记录

1.0.3（2026-03-18）下载此版本

删除多余导出，更新文档

1.0.2（2026-03-18）下载此版本

1、修复样式错误 2、修复检测父组件报错的问题

1.0.1（2026-03-17）下载此版本

修改目录结构

平台兼容性

uni-app(5.0)

Vue2	Vue3	Vue3插件版本	Chrome	Safari	app-vue	app-vue插件版本	app-nvue	Android	iOS	鸿蒙
-	√	1.0.0	-	-	√	1.0.0	-	-	-	-

微信小程序	微信小程序插件版本	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
3.15.0	1.0.0	-	-	-	-	-	-	-	-	-	-	-

uni-app x(5.0)

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
-	-	-	-	-	-

Carson List 列表组件

组件介绍

Carson List 是一个功能强大的 uni-app x 列表组件，包含列表容器（carson-list）和列表项（carson-list-item）两个组件，支持多种功能配置。

功能特点

carson-list (列表容器)

支持显示/隐藏边框
支持自定义边框颜色
支持设置排版方向
支持设置内边距
支持滚动事件和滚动到底部事件

carson-list-item (列表项)

支持显示标题和描述
支持显示左侧缩略图
支持自定义缩略图大小
支持显示右侧文字、角标和开关
支持点击事件和开关变化事件
支持页面跳转
支持显示/隐藏右侧箭头
支持禁用状态
支持多种插槽自定义

安装方式

方式一：通过插件市场安装

在 HBuilderX 中打开插件市场，搜索 "carson-list"，点击安装即可。

方式二：手动导入

将插件文件夹复制到项目的 uni_modules 目录下。

引入组件

在页面中引入组件：

<script setup>
import carsonList from '@/uni_modules/carson-list/components/carson-list/carson-list.uvue';
import carsonListItem from '@/uni_modules/carson-list/components/carson-list-item/carson-list-item.uvue';
</script>

基本用法

<template>
  <carson-list border>
    <carson-list-item 
      title="列表项1" 
      note="这是列表项1的描述"
    />
    <carson-list-item 
      title="列表项2" 
      note="这是列表项2的描述"
    />
  </carson-list>
</template>

carson-list 属性说明

属性名	类型	默认值	说明
border	Boolean	false	是否显示边框
borderColor	String	'#dadbde'	边框颜色
direction	String	'row'	排版方向，可选值：row、column
padding	String, Number	'20rpx 30rpx'	内边距
customStyle	Object	{}	自定义样式

carson-list 事件说明

事件名	说明	回调参数
scroll	滚动事件	event 对象
scrolltolower	滚动到底部事件	无

carson-list-item 属性说明

属性名	类型	默认值	说明
title	String	''	标题
note	String	''	描述
ellipsis	Number, String	0	标题显示行数，0 表示不限制
disabled	Boolean, String	false	是否禁用
clickable	Boolean	false	是否开启点击反馈
showArrow	Boolean, String	false	是否显示右侧箭头
link	Boolean, String	false	是否展示右侧箭头并开启点击反馈，可选值：navigateTo、redirectTo、reLaunch、switchTab
to	String	''	跳转目标页面
showSwitch	Boolean, String	false	是否显示开关
switchChecked	Boolean, String	false	开关是否被选中
showBadge	Boolean, String	false	是否显示数字角标
badge	Object	{}	角标参数，格式：{value: 12, max: 99}
rightText	String	''	右侧文字内容
thumb	String	''	左侧缩略图
thumbSize	String	'base'	缩略图大小，可选值：lg、base、sm
thumbStyles	Object	{}	缩略图样式，可设置 width、height、borderRadius 等
direction	String	'row'	排版方向，可选值：row、column
border	Boolean	false	是否显示边框
padding	String, Number	'20rpx 30rpx'	内边距
customStyle	Object	{backgroundColor: '#FFFFFF'}	自定义样式

carson-list-item 事件说明

事件名	说明	回调参数
click	点击事件	{data: 事件数据}
switchChange	开关变化事件	event 对象

carson-list-item 插槽说明

插槽名	说明
default	自定义整个列表项内容
header	自定义左侧图标区域
body	自定义中间内容区域
footer	自定义右侧内容区域

示例代码

基本列表

<carson-list>
  <carson-list-item title="标题1" note="描述1" />
  <carson-list-item title="标题2" note="描述2" />
  <carson-list-item title="标题3" note="描述3" />
</carson-list>

带边框的列表

<carson-list border borderColor="#e5e5e5">
  <carson-list-item title="标题1" note="描述1" />
  <carson-list-item title="标题2" note="描述2" />
</carson-list>

带缩略图的列表项

<carson-list-item 
  title="带缩略图的列表项"
  note="这是一个带缩略图的列表项"
  thumb="https://example.com/thumb.png"
  thumbSize="lg"
/>

带开关的列表项

<carson-list-item 
  title="带开关的列表项"
  note="这是一个带开关的列表项"
  showSwitch
  :switchChecked="true"
  @switchChange="handleSwitchChange"
/>

<script setup>
function handleSwitchChange(event) {
  console.log('开关状态变化:', event.detail.value);
}
</script>

可点击的列表项

<carson-list-item 
  title="可点击的列表项"
  note="这是一个可点击的列表项"
  clickable
  showArrow
  @click="handleClick"
/>

带页面跳转的列表项

<carson-list-item 
  title="带页面跳转的列表项"
  note="点击跳转到详情页"
  link="navigateTo"
  to="/pages/detail/detail"
  showArrow
/>

注意事项

Carson List 组件需要与 Carson List Item 组件配合使用
当设置 link 属性时，需要同时设置 to 属性来指定跳转目标页面
缩略图大小可以通过 thumbSize 预设值或 thumbStyles 自定义样式来设置
当同时设置 thumbSize 和 thumbStyles 时，thumbStyles 中设置的样式会覆盖 thumbSize 的默认样式

许可证

MIT License

carson-list list 列表 carson-list uni-app

更新记录

1.0.3（2026-03-18） 下载此版本

1.0.2（2026-03-18） 下载此版本

1.0.1（2026-03-17） 下载此版本