Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
没有积善却想登上天堂
unidocs-zh
提交
8bd2bbf5
U
unidocs-zh
项目概览
没有积善却想登上天堂
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
8bd2bbf5
编写于
12月 21, 2022
作者:
Anne_LXM
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
删除重复属性clickable
上级
fc351cec
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
164 addition
and
165 deletion
+164
-165
docs/component/uniui/uni-list.md
docs/component/uniui/uni-list.md
+164
-165
未找到文件。
docs/component/uniui/uni-list.md
浏览文件 @
8bd2bbf5
...
...
@@ -291,7 +291,6 @@ switchTab|同 uni.switchTab()
|badgeText|String|-| 数字角标内容,设置为
`dot`
将显示圆点|
|badgePositon|String|right| 角标位置|
|link|String|navigateTo| 是否展示右侧箭头并开启点击反馈,可选值见下表|
|clickable|Boolean|false| 是否开启点击反馈|
|to|String|-|跳转页面地址,如填写此属性,click 会返回页面是否跳转成功 |
|time|String|-| 右侧时间显示|
|avatarCircle|Boolean|false| 是否显示圆形头像|
...
...
@@ -330,174 +329,174 @@ switchTab|同 uni.switchTab()
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/list/list
> Template
```
html
<template>
<view
class=
"container"
>
<uni-card
:is-shadow=
"false"
is-full
>
<text
class=
"uni-h6"
>
列表组件可以在其中使用图标、略缩图或放置任何你想放的元素,使用场景如:导航菜单、列表、设置中心排版等
</text>
</uni-card>
<uni-section
title=
"基础用法"
type=
"line"
>
<uni-list>
<uni-list-item
title=
"列表文字"
/>
<uni-list-item
title=
"列表文字"
rightText=
"右侧文字"
/>
<uni-list-item
title=
"列表文字"
note=
"列表描述信息"
rightText=
"右侧文字"
/>
</uni-list>
</uni-section>
<uni-section
title=
"禁用列表"
type=
"line"
>
<uni-list>
<uni-list-item
:disabled=
"true"
title=
"列表禁用状态"
rightText=
"右侧文字"
/>
<uni-list-item
:disabled=
"true"
title=
"列表禁用状态"
rightText=
"右侧文字"
/>
</uni-list>
</uni-section>
<uni-section
title=
"显示右侧箭头"
type=
"line"
>
<uni-list>
<uni-list-item
showArrow
title=
"列表文字"
/>
<uni-list-item
showArrow
title=
"列表文字"
rightText=
"右侧文字"
/>
</uni-list>
</uni-section>
<uni-section
title=
"开启点击反馈"
type=
"line"
>
<uni-list>
<uni-list-item
title=
"弹窗提示"
clickable
@
click=
"onClick"
/>
<uni-list-item
title=
"页面跳转"
:to=
"`./chat`"
@
click=
"onClick"
/>
<uni-list-item
title=
"关闭当前页面打开新页面"
showArrow
link=
"redirectTo"
to=
"./chat"
@
click=
"onClick"
/>
<uni-list-item
title=
"打开错误页面(查看控制台)"
showArrow
link=
"redirectTo"
to=
"./chats"
@
click=
"onClick"
/>
</uni-list>
</uni-section>
<uni-section
title=
"不显示分隔线"
type=
"line"
>
<uni-list
:border=
"false"
>
<uni-list-item
title=
"列表文字"
/>
<uni-list-item
:border=
"false"
title=
"列表文字"
note=
"列表描述信息"
rightText=
"右侧文字"
/>
<uni-list-item
:border=
"false"
title=
"列表文字"
note=
"列表描述信息"
rightText=
"右侧文字"
/>
</uni-list>
</uni-section>
<uni-section
title=
"分隔线通栏"
type=
"line"
>
<uni-list
border-full
>
<uni-list-item
title=
"列表文字"
/>
<uni-list-item
title=
"列表文字"
note=
"列表描述信息"
rightText=
"右侧文字"
/>
<uni-list-item
title=
"列表文字"
note=
"列表描述信息"
rightText=
"右侧文字"
/>
</uni-list>
</uni-section>
<uni-section
title=
"文字溢出隐藏"
type=
"line"
>
<uni-list>
<uni-list-item
ellipsis=
"1"
title=
"超长文字显示一行,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字"
/>
<uni-list-item
ellipsis=
"2"
title=
"超长文字显示二行,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字"
rightText=
"二行显示"
/>
<uni-list-item
ellipsis=
"1"
title=
"全部显示,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字"
note=
"列表描述信息,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字"
showArrow
rightText=
"一行显示"
/>
<uni-list-item
title=
"全部显示,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字"
showArrow
rightText=
"全部"
/>
</uni-list>
</uni-section>
<uni-section
title=
"显示图标或图片"
type=
"line"
>
<uni-list>
<uni-list-item
:show-extra-icon=
"true"
showArrow
:extra-icon=
"extraIcon"
title=
"列表左侧带扩展图标"
/>
<uni-list-item
title=
"列表左侧带略缩图"
note=
"列表描述信息"
showArrow
thumb=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size=
"sm"
rightText=
"小图"
/>
<uni-list-item
title=
"列表左侧带略缩图"
note=
"列表描述信息"
showArrow
thumb=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size=
"base"
rightText=
"默认"
/>
<uni-list-item
title=
"列表左侧带略缩图"
note=
"列表描述信息"
showArrow
thumb=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size=
"lg"
rightText=
"大图"
/>
</uni-list>
</uni-section>
<uni-section
title=
"使用插槽"
type=
"line"
>
<uni-list>
<uni-list-item>
<template
v-slot:body
>
<view
class=
"slot-box"
>
<text
class=
"slot-text"
>
使用 body 插槽
</text>
</view>
</template>
</uni-list-item>
<uni-list-item
title=
"自定义右侧插槽"
note=
"列表描述信息"
link
>
<template
v-slot:footer
>
<image
class=
"slot-image"
src=
"/static/logo.png"
mode=
"widthFix"
></image>
</template>
</uni-list-item>
<uni-list-item>
<template
v-slot:header
>
<view
class=
"slot-box"
>
<image
class=
"slot-image"
src=
"/static/logo.png"
mode=
"widthFix"
></image>
</view>
</template>
<template
v-slot:body
>
<text
class=
"slot-box slot-text"
>
自定义两侧插槽
</text>
</template>
<template
v-slot:footer
>
<image
class=
"slot-image"
src=
"/static/logo.png"
mode=
"widthFix"
></image>
</template>
</uni-list-item>
</uni-list>
</uni-section>
</view>
</template>
<template>
<view
class=
"container"
>
<uni-card
:is-shadow=
"false"
is-full
>
<text
class=
"uni-h6"
>
列表组件可以在其中使用图标、略缩图或放置任何你想放的元素,使用场景如:导航菜单、列表、设置中心排版等
</text>
</uni-card>
<uni-section
title=
"基础用法"
type=
"line"
>
<uni-list>
<uni-list-item
title=
"列表文字"
/>
<uni-list-item
title=
"列表文字"
rightText=
"右侧文字"
/>
<uni-list-item
title=
"列表文字"
note=
"列表描述信息"
rightText=
"右侧文字"
/>
</uni-list>
</uni-section>
<uni-section
title=
"禁用列表"
type=
"line"
>
<uni-list>
<uni-list-item
:disabled=
"true"
title=
"列表禁用状态"
rightText=
"右侧文字"
/>
<uni-list-item
:disabled=
"true"
title=
"列表禁用状态"
rightText=
"右侧文字"
/>
</uni-list>
</uni-section>
<uni-section
title=
"显示右侧箭头"
type=
"line"
>
<uni-list>
<uni-list-item
showArrow
title=
"列表文字"
/>
<uni-list-item
showArrow
title=
"列表文字"
rightText=
"右侧文字"
/>
</uni-list>
</uni-section>
<uni-section
title=
"开启点击反馈"
type=
"line"
>
<uni-list>
<uni-list-item
title=
"弹窗提示"
clickable
@
click=
"onClick"
/>
<uni-list-item
title=
"页面跳转"
:to=
"`./chat`"
@
click=
"onClick"
/>
<uni-list-item
title=
"关闭当前页面打开新页面"
showArrow
link=
"redirectTo"
to=
"./chat"
@
click=
"onClick"
/>
<uni-list-item
title=
"打开错误页面(查看控制台)"
showArrow
link=
"redirectTo"
to=
"./chats"
@
click=
"onClick"
/>
</uni-list>
</uni-section>
<uni-section
title=
"不显示分隔线"
type=
"line"
>
<uni-list
:border=
"false"
>
<uni-list-item
title=
"列表文字"
/>
<uni-list-item
:border=
"false"
title=
"列表文字"
note=
"列表描述信息"
rightText=
"右侧文字"
/>
<uni-list-item
:border=
"false"
title=
"列表文字"
note=
"列表描述信息"
rightText=
"右侧文字"
/>
</uni-list>
</uni-section>
<uni-section
title=
"分隔线通栏"
type=
"line"
>
<uni-list
border-full
>
<uni-list-item
title=
"列表文字"
/>
<uni-list-item
title=
"列表文字"
note=
"列表描述信息"
rightText=
"右侧文字"
/>
<uni-list-item
title=
"列表文字"
note=
"列表描述信息"
rightText=
"右侧文字"
/>
</uni-list>
</uni-section>
<uni-section
title=
"文字溢出隐藏"
type=
"line"
>
<uni-list>
<uni-list-item
ellipsis=
"1"
title=
"超长文字显示一行,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字"
/>
<uni-list-item
ellipsis=
"2"
title=
"超长文字显示二行,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字"
rightText=
"二行显示"
/>
<uni-list-item
ellipsis=
"1"
title=
"全部显示,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字"
note=
"列表描述信息,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字"
showArrow
rightText=
"一行显示"
/>
<uni-list-item
title=
"全部显示,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字"
showArrow
rightText=
"全部"
/>
</uni-list>
</uni-section>
<uni-section
title=
"显示图标或图片"
type=
"line"
>
<uni-list>
<uni-list-item
:show-extra-icon=
"true"
showArrow
:extra-icon=
"extraIcon"
title=
"列表左侧带扩展图标"
/>
<uni-list-item
title=
"列表左侧带略缩图"
note=
"列表描述信息"
showArrow
thumb=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size=
"sm"
rightText=
"小图"
/>
<uni-list-item
title=
"列表左侧带略缩图"
note=
"列表描述信息"
showArrow
thumb=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size=
"base"
rightText=
"默认"
/>
<uni-list-item
title=
"列表左侧带略缩图"
note=
"列表描述信息"
showArrow
thumb=
"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size=
"lg"
rightText=
"大图"
/>
</uni-list>
</uni-section>
<uni-section
title=
"使用插槽"
type=
"line"
>
<uni-list>
<uni-list-item>
<template
v-slot:body
>
<view
class=
"slot-box"
>
<text
class=
"slot-text"
>
使用 body 插槽
</text>
</view>
</template>
</uni-list-item>
<uni-list-item
title=
"自定义右侧插槽"
note=
"列表描述信息"
link
>
<template
v-slot:footer
>
<image
class=
"slot-image"
src=
"/static/logo.png"
mode=
"widthFix"
></image>
</template>
</uni-list-item>
<uni-list-item>
<template
v-slot:header
>
<view
class=
"slot-box"
>
<image
class=
"slot-image"
src=
"/static/logo.png"
mode=
"widthFix"
></image>
</view>
</template>
<template
v-slot:body
>
<text
class=
"slot-box slot-text"
>
自定义两侧插槽
</text>
</template>
<template
v-slot:footer
>
<image
class=
"slot-image"
src=
"/static/logo.png"
mode=
"widthFix"
></image>
</template>
</uni-list-item>
</uni-list>
</uni-section>
</view>
</template>
```
> Script
```
html
<script>
export
default
{
components
:
{},
data
()
{
return
{
cover
:
'
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg
'
,
avatar
:
'
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png
'
,
extraIcon
:
{
color
:
'
#4cd964
'
,
size
:
'
22
'
,
type
:
'
gear-filled
'
}
};
},
methods
:
{
onClick
(
e
)
{
console
.
log
(
'
执行click事件
'
,
e
.
data
)
uni
.
showToast
({
title
:
'
点击反馈
'
});
},
switchChange
(
e
)
{
uni
.
showToast
({
title
:
'
change:
'
+
e
.
value
,
icon
:
'
none
'
});
}
}
};
</script>
```
html
<script>
export
default
{
components
:
{},
data
()
{
return
{
cover
:
'
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg
'
,
avatar
:
'
https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png
'
,
extraIcon
:
{
color
:
'
#4cd964
'
,
size
:
'
22
'
,
type
:
'
gear-filled
'
}
};
},
methods
:
{
onClick
(
e
)
{
console
.
log
(
'
执行click事件
'
,
e
.
data
)
uni
.
showToast
({
title
:
'
点击反馈
'
});
},
switchChange
(
e
)
{
uni
.
showToast
({
title
:
'
change:
'
+
e
.
value
,
icon
:
'
none
'
});
}
}
};
</script>
```
> Style
```
html
<style
lang=
"scss"
>
.slot-box
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
row
;
align-items
:
center
;
}
.slot-image
{
/* #ifndef APP-NVUE */
display
:
block
;
/* #endif */
margin-right
:
10px
;
width
:
30px
;
height
:
30px
;
}
.slot-text
{
flex
:
1
;
font-size
:
14px
;
color
:
#4cd964
;
margin-right
:
10px
;
}
> Style
```
html
<style
lang=
"scss"
>
.slot-box
{
/* #ifndef APP-NVUE */
display
:
flex
;
/* #endif */
flex-direction
:
row
;
align-items
:
center
;
}
.slot-image
{
/* #ifndef APP-NVUE */
display
:
block
;
/* #endif */
margin-right
:
10px
;
width
:
30px
;
height
:
30px
;
}
.slot-text
{
flex
:
1
;
font-size
:
14px
;
color
:
#4cd964
;
margin-right
:
10px
;
}
</style>
```
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录