uView Collapse 折叠面板

本文主要是介绍uView Collapse 折叠面板，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

通过折叠面板收纳内容区域

#平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

#基本使用

<template><u-collapse@change="change"@close="close"@open="open"><u-collapse-itemtitle="文档指南"name="Docs guide"><text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text></u-collapse-item><u-collapse-itemtitle="组件全面"name="Variety components"><text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text></u-collapse-item><u-collapse-itemtitle="众多利器"name="Numerous tools"><text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text></u-collapse-item></u-collapse>
</template><script>export default {methods: {open(e) {// console.log('open', e)},close(e) {// console.log('close', e)},change(e) {// console.log('change', e)}}}
</script>

copy

#控制面板的初始状态，以及是否可以操作

• 设置u-collapse-item的name参数，并在u-collapse中指定数组value可以让面板初始化时为打开状态
• 如果设置u-collapse-item的disabled参数，那么面板会保持被禁用状态

<template><u-collapse:value="['2']"><u-collapse-itemtitle="文档指南"><text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text></u-collapse-item><u-collapse-itemdisabledtitle="组件全面"><text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text></u-collapse-item><u-collapse-itemname="2"title="众多利器"><text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text></u-collapse-item></u-collapse>
</template><script>export default {methods: {open(e) {// console.log('open', e)},close(e) {// console.log('close', e)},change(e) {// console.log('change', e)}}}
</script>

copy

#手风琴模式

• 将u-collapse的accordion设置为true，这样可以开启手风琴模式

<template><view class="u-page__item"><text class="u-page__item__title">手风琴模式</text><u-collapseaccordion><u-collapse-itemtitle="文档指南"><text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text></u-collapse-item><u-collapse-itemtitle="组件全面"><text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text></u-collapse-item><u-collapse-itemtitle="众多利器"><text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text></u-collapse-item></u-collapse></view>
</template><style lang="scss">.u-page {padding: 0;&__item {&__title {color: $u-tips-color;background-color: $u-bg-color;padding: 15px;font-size: 15px;&__slot-title {color: $u-primary;font-size: 14px;}}}}.u-collapse-content {color: $u-tips-color;font-size: 14px;}
</style>

copy

#自定义标题和内容

• 通过设置slot来自定义标题和内容

<template><view class="u-page__item"><text class="u-page__item__title">自定义标题和内容</text><u-collapseaccordion><u-collapse-item><text slot="title" class="u-page__item__title__slot-title">文档指南</text><text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text></u-collapse-item><u-collapse-itemtitle="组件全面"><u-icon name="tags-fill" size="20" slot="icon"></u-icon><text class="u-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text></u-collapse-item><u-collapse-itemtitle="众多利器"><text slot="value" class="u-page__item__title__slot-title">自定义内容</text><text class="u-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text></u-collapse-item></u-collapse></view>
</template><style lang="scss">.u-page {padding: 0;&__item {&__title {color: $u-tips-color;background-color: $u-bg-color;padding: 15px;font-size: 15px;&__slot-title {color: $u-primary;font-size: 14px;}}}}.u-collapse-content {color: $u-tips-color;font-size: 14px;}
</style>

这篇关于uView Collapse 折叠面板的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---