Skip to content

unidocs-zh
unidocs-zh

DCloud / unidocs-zh

通知 3211
Star 106
Fork 815
unidocs-zh
unidocs-zh
提交 8bd2bbf5 编写于 作者: Anne_LXM's avatar Anne_LXM
浏览文件
操作

删除重复属性clickable

上级 fc351cec
隐藏空白更改
内联 并排
Showing with 164 addition and 165 deletion
docs/component/uniui/uni-list.md
浏览文件 @ 8bd2bbf5
...@@ -291,7 +291,6 @@ switchTab|同 uni.switchTab() ...@@ -291,7 +291,6 @@ switchTab|同 uni.switchTab()
|badgeText|String|-| 数字角标内容，设置为 `dot` 将显示圆点| |badgeText|String|-| 数字角标内容，设置为 `dot` 将显示圆点|
|badgePositon|String|right| 角标位置| |badgePositon|String|right| 角标位置|
|link|String|navigateTo| 是否展示右侧箭头并开启点击反馈，可选值见下表| |link|String|navigateTo| 是否展示右侧箭头并开启点击反馈，可选值见下表|
|clickable|Boolean|false| 是否开启点击反馈|
|to|String|-|跳转页面地址，如填写此属性，click 会返回页面是否跳转成功 | |to|String|-|跳转页面地址，如填写此属性，click 会返回页面是否跳转成功 |
|time|String|-| 右侧时间显示| |time|String|-| 右侧时间显示|
|avatarCircle|Boolean|false| 是否显示圆形头像| |avatarCircle|Boolean|false| 是否显示圆形头像|
...@@ -330,174 +329,174 @@ switchTab|同 uni.switchTab() ...@@ -330,174 +329,174 @@ switchTab|同 uni.switchTab()
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/list/list ::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/list/list
> Template > Template
``` html ``` html
<template> <template>
<view class="container"> <view class="container">
<uni-card :is-shadow="false" is-full> <uni-card :is-shadow="false" is-full>
<text class="uni-h6">列表组件可以在其中使用图标、略缩图或放置任何你想放的元素，使用场景如：导航菜单、列表、设置中心排版等</text> <text class="uni-h6">列表组件可以在其中使用图标、略缩图或放置任何你想放的元素，使用场景如：导航菜单、列表、设置中心排版等</text>
</uni-card> </uni-card>
<uni-section title="基础用法" type="line"> <uni-section title="基础用法" type="line">
<uni-list> <uni-list>
<uni-list-item title="列表文字" /> <uni-list-item title="列表文字" />
<uni-list-item title="列表文字" rightText="右侧文字" /> <uni-list-item title="列表文字" rightText="右侧文字" />
<uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" /> <uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" />
</uni-list> </uni-list>
</uni-section> </uni-section>
<uni-section title="禁用列表" type="line"> <uni-section title="禁用列表" type="line">
<uni-list> <uni-list>
<uni-list-item :disabled="true" title="列表禁用状态" rightText="右侧文字" /> <uni-list-item :disabled="true" title="列表禁用状态" rightText="右侧文字" />
<uni-list-item :disabled="true" title="列表禁用状态" rightText="右侧文字" /> <uni-list-item :disabled="true" title="列表禁用状态" rightText="右侧文字" />
</uni-list> </uni-list>
</uni-section> </uni-section>
<uni-section title="显示右侧箭头" type="line"> <uni-section title="显示右侧箭头" type="line">
<uni-list> <uni-list>
<uni-list-item showArrow title="列表文字" /> <uni-list-item showArrow title="列表文字" />
<uni-list-item showArrow title="列表文字" rightText="右侧文字" /> <uni-list-item showArrow title="列表文字" rightText="右侧文字" />
</uni-list> </uni-list>
</uni-section> </uni-section>
<uni-section title="开启点击反馈" type="line"> <uni-section title="开启点击反馈" type="line">
<uni-list> <uni-list>
<uni-list-item title="弹窗提示" clickable @click="onClick" /> <uni-list-item title="弹窗提示" clickable @click="onClick" />
<uni-list-item title="页面跳转" :to="`./chat`" @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="./chat" @click="onClick" />
<uni-list-item title="打开错误页面(查看控制台)" showArrow link="redirectTo" to="./chats" @click="onClick" /> <uni-list-item title="打开错误页面(查看控制台)" showArrow link="redirectTo" to="./chats" @click="onClick" />
</uni-list> </uni-list>
</uni-section> </uni-section>
<uni-section title="不显示分隔线" type="line"> <uni-section title="不显示分隔线" type="line">
<uni-list :border="false"> <uni-list :border="false">
<uni-list-item title="列表文字" /> <uni-list-item title="列表文字" />
<uni-list-item :border="false" title="列表文字" note="列表描述信息" rightText="右侧文字" /> <uni-list-item :border="false" title="列表文字" note="列表描述信息" rightText="右侧文字" />
<uni-list-item :border="false" title="列表文字" note="列表描述信息" rightText="右侧文字" /> <uni-list-item :border="false" title="列表文字" note="列表描述信息" rightText="右侧文字" />
</uni-list> </uni-list>
</uni-section> </uni-section>
<uni-section title="分隔线通栏" type="line"> <uni-section title="分隔线通栏" type="line">
<uni-list border-full> <uni-list border-full>
<uni-list-item title="列表文字" /> <uni-list-item title="列表文字" />
<uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" /> <uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" />
<uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" /> <uni-list-item title="列表文字" note="列表描述信息" rightText="右侧文字" />
</uni-list> </uni-list>
</uni-section> </uni-section>
<uni-section title="文字溢出隐藏" type="line"> <uni-section title="文字溢出隐藏" type="line">
<uni-list> <uni-list>
<uni-list-item ellipsis="1" title="超长文字显示一行,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" /> <uni-list-item ellipsis="1" title="超长文字显示一行,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" />
<uni-list-item ellipsis="2" title="超长文字显示二行,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" <uni-list-item ellipsis="2" title="超长文字显示二行,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字"
rightText="二行显示" /> rightText="二行显示" />
<uni-list-item ellipsis="1" title="全部显示,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" <uni-list-item ellipsis="1" title="全部显示,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字"
note="列表描述信息,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字" showArrow rightText="一行显示" /> note="列表描述信息,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字,下是测试文字" showArrow rightText="一行显示" />
<uni-list-item title="全部显示,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" showArrow rightText="全部" /> <uni-list-item title="全部显示,以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字以下是测试文字" showArrow rightText="全部" />
</uni-list> </uni-list>
</uni-section> </uni-section>
<uni-section title="显示图标或图片" type="line"> <uni-section title="显示图标或图片" type="line">
<uni-list> <uni-list>
<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon" title="列表左侧带扩展图标" /> <uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon" title="列表左侧带扩展图标" />
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" showArrow <uni-list-item title="列表左侧带略缩图" note="列表描述信息" showArrow
thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size="sm" rightText="小图" /> thumb-size="sm" rightText="小图" />
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" showArrow <uni-list-item title="列表左侧带略缩图" note="列表描述信息" showArrow
thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size="base" rightText="默认" /> thumb-size="base" rightText="默认" />
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" showArrow <uni-list-item title="列表左侧带略缩图" note="列表描述信息" showArrow
thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size="lg" rightText="大图" /> thumb-size="lg" rightText="大图" />
</uni-list> </uni-list>
</uni-section> </uni-section>
<uni-section title="使用插槽" type="line"> <uni-section title="使用插槽" type="line">
<uni-list> <uni-list>
<uni-list-item> <uni-list-item>
<template v-slot:body> <template v-slot:body>
<view class="slot-box"> <view class="slot-box">
<text class="slot-text">使用 body 插槽</text> <text class="slot-text">使用 body 插槽</text>
</view> </view>
</template> </template>
</uni-list-item> </uni-list-item>
<uni-list-item title="自定义右侧插槽" note="列表描述信息" link> <uni-list-item title="自定义右侧插槽" note="列表描述信息" link>
<template v-slot:footer> <template v-slot:footer>
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image> <image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</template> </template>
</uni-list-item> </uni-list-item>
<uni-list-item> <uni-list-item>
<template v-slot:header> <template v-slot:header>
<view class="slot-box"> <view class="slot-box">
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image> <image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</view> </view>
</template> </template>
<template v-slot:body> <template v-slot:body>
<text class="slot-box slot-text">自定义两侧插槽</text> <text class="slot-box slot-text">自定义两侧插槽</text>
</template> </template>
<template v-slot:footer> <template v-slot:footer>
<image class="slot-image" src="/static/logo.png" mode="widthFix"></image> <image class="slot-image" src="/static/logo.png" mode="widthFix"></image>
</template> </template>
</uni-list-item> </uni-list-item>
</uni-list> </uni-list>
</uni-section> </uni-section>
</view> </view>
</template> </template>
``` ```
> Script > Script
``` html ``` html
<script> <script>
export default { export default {
components: {}, components: {},
data() { data() {
return { return {
cover: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg', 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', avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
extraIcon: { extraIcon: {
color: '#4cd964', color: '#4cd964',
size: '22', size: '22',
type: 'gear-filled' type: 'gear-filled'
} }
}; };
}, },
methods: { methods: {
onClick(e) { onClick(e) {
console.log('执行click事件', e.data) console.log('执行click事件', e.data)
uni.showToast({ uni.showToast({
title: '点击反馈' title: '点击反馈'
}); });
}, },
switchChange(e) { switchChange(e) {
uni.showToast({ uni.showToast({
title: 'change:' + e.value, title: 'change:' + e.value,
icon: 'none' icon: 'none'
}); });
} }
} }
}; };
</script> </script>
``` ```
> Style > Style
``` html ``` html
<style lang="scss"> <style lang="scss">
.slot-box { .slot-box {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
/* #endif */ /* #endif */
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.slot-image { .slot-image {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
margin-right: 10px; margin-right: 10px;
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.slot-text { .slot-text {
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
color: #4cd964; color: #4cd964;
margin-right: 10px; margin-right: 10px;
} }
</style> </style>
``` ```
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或