## 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" :badge-style="{backgroundColor:'#FF80AB'}"></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'
},
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
<项目介绍> 个人毕业设计-基于Yolov5+Python+vue+flask实现卷积神经网络智能识别垃圾智能分类并编写微信小程序管理 - 不懂运行,下载完可以私聊问,可远程教学 该资源内项目源码是个人的毕设,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 --------
资源推荐
资源详情
资源评论
收起资源包目录
rubbish_recognition-main (2).zip (46个子文件)
rubbish_recognition-main
yolov5
VOCdevkit
VOC2007
JPEGImages
frontend_file
pages
Manager
resource-main
mana-main
index
user
person
components
index
components
introduce
questions
news
Entity
uni_modules
uni-steps
readme.md 309B
components
uni-steps
uni-ui
readme.md 12KB
components
uni-ui
uni-indexed-list
readme.md 330B
components
uni-indexed-list
uni-notice-bar
readme.md 313B
components
uni-notice-bar
uni-search-bar
readme.md 310B
components
uni-search-bar
i18n
uni-number-box
readme.md 336B
components
uni-number-box
uni-row
readme.md 375B
components
uni-row
uni-col
uni-data-checkbox
readme.md 1KB
components
uni-data-checkbox
uni-link
readme.md 399B
components
uni-link
uni-load-more
readme.md 370B
components
uni-load-more
i18n
uni-easyinput
readme.md 517B
components
uni-easyinput
uview-ui
libs
mixin
css
function
luch-request
adapters
utils
helpers
core
util
config
props
components
u-parse
node
u-subsection
u-steps
u-tooltip
u-album
u-car-keyboard
u-number-box
u--text
u-divider
u-tr
u-radio
u--image
u-back-top
u-toast
u-upload
u-td
u-count-down
u-icon
u-loadmore
u-loading-icon
uview-ui
u-safe-bottom
u-input
u-tabs
u-skeleton
u-swiper-indicator
u-number-keyboard
u-list-item
u-circle-progress
u-sticky
u-tabbar
u-form
u-checkbox-group
u-navbar
u-avatar-group
u-rate
u-dropdown
u-grid-item
u-row-notice
u-notice-bar
u-tabbar-item
u-overlay
u--input
u-collapse-item
u-row
u-toolbar
u-list
u-radio-group
u-calendar
u-link
u-read-more
u-table
u-code
u-empty
u-image
u-transition
u-switch
u-search
u-avatar
u-column-notice
u-index-anchor
u-datetime-picker
u-modal
u-slider
u-checkbox
u-notify
u-line
u-col
u-gap
u-picker-column
u-collapse
u-tag
u-tabs-item
u-picker
u-textarea
u-count-to
u-action-sheet
u-line-progress
u-grid
u-code-input
u-swiper
u-alert
u--textarea
u-scroll-list
u-index-item
u-button
u-index-list
u-popup
u-status-bar
u-dropdown-item
u-form-item
u-cell-group
u-keyboard
u-steps-item
u-text
u-no-network
u-cell
u-swipe-action
u--form
u-swipe-action-item
u-badge
u-loading-page
README.md 3KB
uni-data-picker
readme.md 1KB
components
uni-data-picker
uni-data-pickerview
uni-countdown
readme.md 306B
components
uni-countdown
i18n
uni-title
readme.md 406B
components
uni-title
uni-combox
readme.md 295B
components
uni-combox
uni-fab
readme.md 305B
components
uni-fab
uni-segmented-control
readme.md 349B
components
uni-segmented-control
uni-transition
readme.md 314B
components
uni-transition
uni-grid
readme.md 281B
components
uni-grid
uni-grid-item
uni-forms
readme.md 1KB
components
uni-forms
uni-forms-item
uni-card
readme.md 289B
components
uni-card
uni-file-picker
readme.md 413B
components
uni-file-picker
uni-nav-bar
readme.md 329B
components
uni-nav-bar
uni-icons
readme.md 297B
components
uni-icons
uni-popup
readme.md 388B
components
uni-popup-dialog
uni-popup-share
uni-popup
i18n
uni-popup-message
uni-collapse
readme.md 526B
components
uni-collapse-item
uni-collapse
uni-badge
readme.md 406B
components
uni-badge
uni-fav
readme.md 333B
components
uni-fav
i18n
uni-rate
readme.md 367B
components
uni-rate
uni-drawer
readme.md 294B
components
uni-drawer
uni-data-select
readme.md 362B
components
uni-data-select
uni-list
readme.md 15KB
components
uni-list-chat
uni-list-item
uni-list-ad
uni-list
uni-datetime-picker
readme.md 1KB
components
uni-datetime-picker
i18n
uni-dateformat
readme.md 324B
components
uni-dateformat
uni-swipe-action
readme.md 356B
components
uni-swipe-action-item
uni-swipe-action
uni-pagination
readme.md 351B
components
uni-pagination
i18n
uni-group
readme.md 349B
components
uni-group
uni-swiper-dot
readme.md 327B
components
uni-swiper-dot
uni-goods-nav
readme.md 331B
components
uni-goods-nav
i18n
uni-scss
styles
tools
setting
readme.md 368B
uni-table
readme.md 316B
components
uni-tbody
uni-thead
uni-td
uni-th
uni-tr
uni-table
i18n
uni-tooltip
readme.md 410B
components
uni-tooltip
uni-section
readme.md 344B
components
uni-section
uni-calendar
readme.md 3KB
components
uni-calendar
i18n
uni-tag
readme.md 351B
components
uni-tag
unpackage
dist
dev
mp-weixin
pages
Manager
resource-main
mana-main
index
user
person
index
components
introduce
news
Entity
uni_modules
uni-easyinput
components
uni-easyinput
uview-ui
components
u--image
u-icon
u-loading-icon
u-safe-bottom
u-input
u-form
u-overlay
u--input
u-image
u-transition
u-search
u-line
u-button
u-popup
u-status-bar
u-form-item
u--form
uni-title
components
uni-title
uni-transition
components
uni-transition
uni-forms
components
uni-forms
uni-forms-item
uni-card
components
uni-card
uni-icons
components
uni-icons
uni-popup
components
uni-popup-dialog
uni-popup
uni-badge
components
uni-badge
uni-list
components
uni-list-item
uni-list
uni-table
components
uni-td
uni-th
uni-tr
uni-table
uni-section
components
uni-section
common
static
introduce
swiper
log
.automator
mp-weixin
static
introduce
swiper
log
.hbuilderx
共 46 条
- 1
资源评论
机智的程序员zero
- 粉丝: 1825
- 资源: 4176
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- MT2301ACTR-VB一款SOT23封装P-Channel场效应MOS管
- Vue 3 开发PC端实战从零到上线.docx
- Unity 资源插件之 Environment Weather Effect
- sap-me-products-how-to-guide-en.pdf
- sap-me-production-tracking-how-to-guide-en.pdf
- sap-me-production-lines-how-to-guide-en.pdf
- 路斯特伺服操作手册,应用手册 v1.00
- sap-me-process-workflow-how-to-guide-en.pdf
- sap-me-printing-how-to-guide-en.pdf
- sap-me-pod-how-to-guide-en.pdf
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功