## List 列表
> **组件名:uni-list**
> 代码块: `uList`、`uListItem`
> 关联组件:`uni-list-item`、`uni-badge`、`uni-icons`、`uni-list-chat`、`uni-list-ad`
List 列表组件,包含基本列表样式、可扩展插槽机制、长列表性能优化、多端兼容。
在vue页面里,它默认使用页面级滚动。在app-nvue页面里,它默认使用原生list组件滚动。这样的长列表,在滚动出屏幕外后,系统会回收不可见区域的渲染内存资源,不会造成滚动越长手机越卡的问题。
uni-list组件是父容器,里面的核心是uni-list-item子组件,它代表列表中的一个可重复行,子组件可以无限循环。
uni-list-item有很多风格,uni-list-item组件通过内置的属性,满足一些常用的场景。当内置属性不满足需求时,可以通过扩展插槽来自定义列表内容。
内置属性可以覆盖的场景包括:导航列表、设置列表、小图标列表、通信录列表、聊天记录列表。
涉及很多大图或丰富内容的列表,比如类今日头条的新闻列表、类淘宝的电商列表,需要通过扩展插槽实现。
下文均有样例给出。
uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件:[uni-load-more](https://ext.dcloud.net.cn/plugin?id=29)
### 安装方式
本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`。
如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
> **注意事项**
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
> - 组件需要依赖 `sass` 插件 ,请自行手动安装
> - 组件内部依赖 `'uni-icons'` 、`uni-badge` 组件
> - `uni-list` 和 `uni-list-item` 需要配套使用,暂不支持单独使用 `uni-list-item`
> - 只有开启点击反馈后,会有点击选中效果
> - 使用插槽时,可以完全自定义内容
> - note 、rightText 属性暂时没做限制,不支持文字溢出隐藏,使用时应该控制长度显示或通过默认插槽自行扩展
> - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式,开启方式: 详情 --> 项目配置 --> 启用 component2 编译
> - 如果需要修改 `switch`、`badge` 样式,请使用插槽自定义
> - 在 `HBuilderX` 低版本中,可能会出现组件显示 `undefined` 的问题,请升级最新的 `HBuilderX` 或者 `cli`
> - 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
### 基本用法
- 设置 `title` 属性,可以显示列表标题
- 设置 `disabled` 属性,可以禁用当前项
```html
<uni-list>
<uni-list-item title="列表文字" ></uni-list-item>
<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
</uni-list>
```
### 多行内容显示
- 设置 `note` 属性 ,可以在第二行显示描述文本信息
```html
<uni-list>
<uni-list-item title="列表文字" note="列表描述信息"></uni-list-item>
<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item>
</uni-list>
```
### 右侧显示角标、switch
- 设置 `show-badge` 属性 ,可以显示角标内容
- 设置 `show-switch` 属性,可以显示 switch 开关
```html
<uni-list>
<uni-list-item title="列表右侧显示角标" :show-badge="true" badge-text="12" ></uni-list-item>
<uni-list-item title="列表右侧显示 switch" :show-switch="true" @switchChange="switchChange" ></uni-list-item>
</uni-list>
```
### 左侧显示略缩图、图标
- 设置 `thumb` 属性 ,可以在列表左侧显示略缩图
- 设置 `show-extra-icon` 属性,并指定 `extra-icon` 可以在左侧显示图标
```html
<uni-list>
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size="lg" rightText="右侧文字"></uni-list-item>
<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩展图标" ></uni-list-item>
</uni-list>
```
### 开启点击反馈和右侧箭头
- 设置 `clickable` 为 `true` ,则表示这是一个可点击的列表,会默认给一个点击效果,并可以监听 `click` 事件
- 设置 `link` 属性,会自动开启点击反馈,并给列表右侧添加一个箭头
- 设置 `to` 属性,可以跳转页面,`link` 的值表示跳转方式,如果不指定,默认为 `navigateTo`
```html
<uni-list>
<uni-list-item title="开启点击反馈" clickable @click="onClick" ></uni-list-item>
<uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
<uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
</uni-list>
```
### 聊天列表示例
- 设置 `clickable` 为 `true` ,则表示这是一个可点击的列表,会默认给一个点击效果,并可以监听 `click` 事件
- 设置 `link` 属性,会自动开启点击反馈,`link` 的值表示跳转方式,如果不指定,默认为 `navigateTo`
- 设置 `to` 属性,可以跳转页面
- `time` 属性,通常会设置成时间显示,但是这个属性不仅仅可以设置时间,你可以传入任何文本,注意文本长度可能会影响显示
- `avatar` 和 `avatarList` 属性同时只会有一个生效,同时设置的话,`avatarList` 属性的长度大于1 ,`avatar` 属性将失效
- 可以通过默认插槽自定义列表右侧内容
```html
<uni-list>
<uni-list :border="true">
<!-- 显示圆形头像 -->
<uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" ></uni-list-chat>
<!-- 右侧带角标 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-text="12"></uni-list-chat>
<!-- 头像显示圆点 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
<!-- 头像显示角标 -->
<uni-list-chat title="uni-app" avatar="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat>
<!-- 显示多头像 -->
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
<!-- 自定义右侧内容 -->
<uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的消息" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
<view class="chat-custom-right">
<text class="chat-custom-text">刚刚</text>
<!-- 需要使用 uni-icons 请自行引入 -->
<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
</view>
</uni-list-chat>
</uni-list>
</uni-list>
```
```javascript
export default {
components: {},
data() {
return {
avatarList: [{
url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png'
}, {
url: 'https://vkceyugu.cdn.bspapp.c
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
uniapp+SpringBoot即时通讯聊天软件源码,前端使用uniapp,后端使用SpringBoot。 手机端使用uniapp实现,目前仅支持安卓端和iOS端,小程序端和H5端暂未做适配。
资源推荐
资源详情
资源评论
收起资源包目录
Uniapp+SpringBoot即时通讯聊天安卓APP源码 (853个子文件)
libyuv.a 4.48MB
tuicalling-release.aar 13.04MB
tuicore-release.aar 217KB
TUICallingModule-release.aar 36KB
animation.css 70KB
uniicons.css 8KB
customicons.css 2KB
Dockerfile 978B
.DS_Store 8KB
.DS_Store 6KB
.DS_Store 6KB
.DS_Store 6KB
.DS_Store 6KB
.DS_Store 6KB
.gitignore 622B
.gitignore 126B
TRTCCloud.h 111KB
ITRTCCloud.h 87KB
TRTCCloudDef.h 67KB
TRTCTypeDef.h 65KB
V2TIMManager+Message.h 54KB
TRTCCloudCallback.h 50KB
TIMErrorCode.h 49KB
TRTCCloudDelegate.h 45KB
TXLiteAVCode.h 39KB
TXLiteAVCode.h 39KB
V2TIMManager.h 25KB
V2TIMManager+Group.h 21KB
V2TXLiveDef.h 21KB
TXLiveSDKTypeDef.h 19KB
V2TIMManager+Friendship.h 17KB
ITXDeviceManager.h 17KB
TXAudioEffectManager.h 13KB
TXDeviceManager.h 13KB
TXBeautyManager.h 12KB
ITXAudioEffectManager.h 12KB
V2TIMManager+Conversation.h 11KB
TXLiveSDKEventDef.h 11KB
ITRTCStatistics.h 10KB
TXLivePlayer.h 10KB
TRTCStatistics.h 9KB
V2TIMManager+Signaling.h 7KB
V2TXLivePlayer.h 7KB
TCBeautyPanelActionPerformer.h 7KB
TXLivePlayConfig.h 5KB
V2TXLivePlayerObserver.h 4KB
V2TIMManager+APNS.h 4KB
TCBeautyPanelTheme.h 4KB
TXLiveBase.h 4KB
V2TXLiveCode.h 3KB
TCBeautyPanelView.h 3KB
V2TXLivePremier.h 2KB
TCMenuView.h 2KB
TXLiteAVEncodedDataProcessingListener.h 2KB
TCFilter.h 2KB
TXVideoCustomProcessDelegate.h 2KB
TXLiveAudioSessionDelegate.h 1KB
TXLiteAVSDK.h 1KB
TXLiveRecordTypeDef.h 1KB
TXAudioCustomProcessDelegate.h 1KB
TXAudioRawDataDelegate.h 1KB
TXLiteAVBuffer.h 1KB
ITRTCAudioPacketListener.h 802B
TCBeautyPanel.h 791B
TXLivePlayListener.h 651B
TCBeautyPanelActionProxy.h 539B
TXLiveRecordListener.h 382B
ImSDK_Plus.h 369B
am.html 11KB
index.html 5KB
index.html 344B
boot-im.iml 19KB
ImSDK_Plus 12.95MB
.roid.ins 9B
RedisUtils.java 33KB
ChatGroupServiceImpl.java 24KB
ChatTopicServiceImpl.java 17KB
ChatFriendServiceImpl.java 14KB
ChatUserServiceImpl.java 10KB
ChatPushServiceImpl.java 9KB
ChatMsgServiceImpl.java 7KB
ChatTalkServiceImpl.java 6KB
ChatApplyServiceImpl.java 6KB
MyController.java 6KB
GroupController.java 5KB
TencentUtils.java 5KB
GeoHashUtils.java 5KB
PushUtils.java 5KB
ShiroTokenFilter.java 5KB
AppConstants.java 5KB
ShiroRealm.java 5KB
ShiroConfiguration.java 4KB
ChatGroupInfoServiceImpl.java 4KB
TopicController.java 4KB
NearServiceImpl.java 4KB
AuthController.java 4KB
ApplicationConfig.java 4KB
BootWebSocketHandler.java 3KB
TrtcServiceImpl.java 3KB
SmsServiceImpl.java 3KB
共 853 条
- 1
- 2
- 3
- 4
- 5
- 6
- 9
资源评论
破碎的天堂鸟
- 粉丝: 9402
- 资源: 2672
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 健身房会员锻炼数据集.zip
- 基于stm32和openmv的色块追踪云台详细文档+全部资料+高分项目.zip
- 基于51单片机声音定位系统课程设计 含源码,仿真,原理图,报告
- 基于STM32和OpenMV的可以实现识别灯自动停车的智能小车。详细文档+全部资料+高分项目.zip
- 自学Matlab必备的60个小程序代码.zip
- 基于STM32和ESP8266在机智云平台下的智能家居系统详细文档+全部资料+高分项目.zip
- 基于STM32控制步进电机云台画线画圆的工程详细文档+全部资料+高分项目.zip
- 基于stm32以及openmv的视觉云台追踪小车详细文档+全部资料+高分项目.zip
- 基于STM32有感直流无刷电机驱动控制程序,集成CANopen通讯电机控制子集协议 和 MONDBUS 协议。详细文档+全部资料+高分项目.zip
- 基于zigbee和stm32的智能家居系统,上位机使用Qt编写,实现了基本的监控。主要包括监控室内温度、湿度、烟雾浓度,用led灯模拟控制家中的灯。界面良好。详细文档+全部资料+高分项目.zip
- 基于uIP+IAP的STM32网络远程烧录升级程序。详细文档+全部资料+高分项目.zip
- whittaker-smoother去噪算法
- 基于安卓开发的智能车载APP具有智能车载健康检测地图定位短信验证登陆注册等功能 数据存储与传输采用MySQL+PHP+JSON 硬件开发基于STM32 F407详细文档+全部资料+高分项目.zip
- 基于输入MCU捕获的电容触摸演示套件,包含软件与硬件详细文档+全部资料+高分项目.zip
- 数据集-目标检测系列- 鸭舌帽 检测数据集 cap >> DataBall
- TSP(SA)模拟退火 地图 源码 可运行.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功