You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
171 lines
6.1 KiB
171 lines
6.1 KiB
<template> |
|
<view> |
|
<uni-card :is-shadow="false" is-full> |
|
<text class="uni-h6">折叠面板用来折叠/显示过长的内容或者是列表。通常是在多内容分类项使用，折叠不重要的内容，显示重要内容。点击可以展开折叠部分。</text> |
|
</uni-card> |
|
<uni-section title="基础用法" type="line"> |
|
<uni-collapse ref="collapse" v-model="value" @change="change"> |
|
<uni-collapse-item title="默认开启" > |
|
<view class="content"> |
|
<text class="text">{{content}}</text> |
|
</view> |
|
</uni-collapse-item> |
|
<uni-collapse-item title="折叠内容"> |
|
<view class="content"> |
|
<text class="text">折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字。再次点击标题，折叠内容。</text> |
|
</view> |
|
</uni-collapse-item> |
|
<uni-collapse-item title="禁用状态" disabled> |
|
<view class="content"> |
|
<text class="text">禁用状态内容主体，页面上是看不到这段话的。</text> |
|
</view> |
|
</uni-collapse-item> |
|
</uni-collapse> |
|
</uni-section> |
|
|
|
<button class="button" type="primary" @click="add">动态修改内容</button> |
|
<!-- TODO app 端默认不使用动画，app在使用高度动画的时候会有性能开销问题，所以应该要酌情使用 --> |
|
<uni-section title="使用动画效果" type="line"> |
|
<uni-collapse > |
|
<uni-collapse-item title="使用动画" :show-animation="true"> |
|
<view class="content"> |
|
<text class="text">默认开启组件动画，使用动画效果折叠内容会有一个从上到下的动画。</text> |
|
</view> |
|
</uni-collapse-item> |
|
<uni-collapse-item title="不使用动画" :show-animation="false"> |
|
<view class="content"> |
|
<text class="text">设置 show-animation="false",关闭当前组件动画效果。</text> |
|
</view> |
|
</uni-collapse-item> |
|
</uni-collapse> |
|
</uni-section> |
|
<uni-section title="手风琴效果（只会保留一个的打开状态）" type="line"> |
|
<uni-collapse accordion v-model="accordionVal" @change="change"> |
|
<uni-collapse-item title="手风琴效果"> |
|
<view class="content"> |
|
<text class="text">手风琴效果同时只会保留一个组件的打开状态，其余组件会自动关闭。</text> |
|
</view> |
|
</uni-collapse-item> |
|
<uni-collapse-item title="手风琴效果"> |
|
<view class="content"> |
|
<text class="text">手风琴效果同时只会保留一个组件的打开状态，其余组件会自动关闭。</text> |
|
</view> |
|
</uni-collapse-item> |
|
<uni-collapse-item title="手风琴效果"> |
|
<view class="content"> |
|
<text class="text">手风琴效果同时只会保留一个组件的打开状态，其余组件会自动关闭。</text> |
|
</view> |
|
</uni-collapse-item> |
|
</uni-collapse> |
|
</uni-section> |
|
|
|
<uni-section title="配置图片" type="line"> |
|
<uni-collapse> |
|
<uni-collapse-item title="标题文字" |
|
thumb="https://web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"> |
|
<view class="content"> |
|
<text class="text">折叠内容主体，可自定义内容及样式</text> |
|
</view> |
|
</uni-collapse-item> |
|
<uni-collapse-item title="标题文字" |
|
thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"> |
|
<view class="content"> |
|
<text class="text">折叠内容主体，可自定义内容及样式</text> |
|
</view> |
|
</uni-collapse-item> |
|
</uni-collapse> |
|
</uni-section> |
|
|
|
<uni-section title="使用插槽" type="line"> |
|
<uni-collapse> |
|
<uni-collapse-item titleBorder="none"> |
|
<template v-slot:title> |
|
<uni-list> |
|
<uni-list-item title="标题使用自定义标题插槽" :show-extra-icon="true" :extra-icon="extraIcon"> |
|
</uni-list-item> |
|
</uni-list> |
|
</template> |
|
<view class="content"> |
|
<text class="text">折叠内容主体，可自定义内容及样式</text> |
|
</view> |
|
</uni-collapse-item> |
|
<uni-collapse-item title="折叠内容使用 uni-list 组件"> |
|
<uni-list> |
|
<uni-list-item title="列表文字"></uni-list-item> |
|
<uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item> |
|
<uni-list-item title="列表右侧显示 switch" :show-switch="true"></uni-list-item> |
|
<uni-list-item :show-extra-icon="true" :extra-icon="extraIcon" title="列表左侧带扩展图标"></uni-list-item> |
|
<uni-list-item title="列表左侧带略缩图" note="列表描述信息" |
|
thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png" |
|
thumb-size="lg" rightText="右侧文字" showArrow></uni-list-item> |
|
<uni-list-item title="开启点击反馈" clickable showArrow @click="onClick"></uni-list-item> |
|
</uni-list> |
|
</uni-collapse-item> |
|
</uni-collapse> |
|
</uni-section> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
components: {}, |
|
data() { |
|
return { |
|
value:['0'], |
|
accordionVal:'1', |
|
content: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。', |
|
extraIcon: { |
|
color: '#4cd964', |
|
size: '26', |
|
type: 'image' |
|
}, |
|
} |
|
}, |
|
methods: { |
|
add() { |
|
if (this.content.length > 35) { |
|
this.content = '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。' |
|
} else { |
|
this.content = '折叠内容主体，这是一段比较长内容。通过点击按钮修改后内容后，使组件高度发生变化，在次点击按钮恢复之前的内容和高度。' |
|
} |
|
// TODO 小程序中不支持自动更新 ，需要手动resize 更新组件高度 |
|
// #ifdef MP |
|
this.$nextTick(() => { |
|
this.$refs.collapse.resize() |
|
}) |
|
// #endif |
|
}, |
|
onClick(e) { |
|
uni.showToast({ |
|
title: '列表被点击' |
|
}) |
|
}, |
|
change(e) { |
|
console.log(e); |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.example-body { |
|
flex-direction: column; |
|
flex: 1; |
|
} |
|
|
|
.content { |
|
padding: 15px; |
|
} |
|
|
|
.text { |
|
font-size: 14px; |
|
color: #666; |
|
line-height: 20px; |
|
} |
|
|
|
.button { |
|
// margin-top: 10px; |
|
margin: 10px; |
|
margin-bottom: 0; |
|
} |
|
</style>
|
|
|