uView Collapse 折叠面板

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

#平台差异说明

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

#基本使用

  
    
      涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川
 服务器托管网   
    
      众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用
    
    
      众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨
    
  



	export default {
		methods: {
            open(e) {
              // console.log('open', e)
            },
            close(e) {
              // console.log('close', e)
            },
            change(e) {
              // console.log('change', e)
            }
        }
	}

copy

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

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

  
    
      涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川
    
    
      众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用
    
    
      众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨
    
  



  export default {
    methods: {
      open(e) {
        // console.log('open', e)
      },
      close(e) {
        // console.log('close', e)
      },
      change(e) {
        // console.log('change', e)
      }
    }
  }

copy

#手风琴模式

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

    
        手风琴模式
        
            
                涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川
            
            
                众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用
            
            
                众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨
            
        
    



    .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;
    }

copy

#自定义标题和内容

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

    
        自定义标题和内容
        
            
                文档指南
                涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川
            
            
                
                众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用
            
            
                自定义内容
                众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨
            
       服务器托管网 
    



    .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;
    }

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: Objective-C blocks 概要

1.block的使用 1.1什么是block？ Blocks是C语言的扩充功能：带有自动变量（局部变量）的匿名函数。 “带有自动变量”在Blocks中表现为“截取自动变量” “匿名函数”就是“不带名称的函数” 块，封装了函数调用及调用环境的OC对象 block…