更新记录

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

修改目录结构

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

• 初始版本发布
• 支持基本列表功能
• 支持缩略图、开关、角标等功能
• 支持页面跳转

平台兼容性

uni-app(5.0)

uni-app x(5.0)

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 属性说明

carson-list 事件说明

carson-list-item 属性说明

carson-list-item 事件说明

carson-list-item 插槽说明

示例代码

基本列表

<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 的默认样式

更新日志

1.0.0

• 初始版本发布
• 支持基本列表功能
• 支持缩略图、开关、角标等功能
• 支持页面跳转

许可证

MIT License