Ionic学习日记12： accordionlist效果的实现（手风琴）

前言

为了美观，美观，美观，没了，效果大概是这样

界面效果

使用一个list包裹着button和一个div，点击button后才显示div里面的内容，加了点特效（渐变）让他变得像是出来一封信的样子，这样看起来好看点

准备步骤

本篇日记只牵扯到一个page

HTML页面

    
      
      
{{d.titlestart}}
      
{{d.titleend}}
    
    

      
休假类型：{{d.titlestart}}
      
        
休假原因
        {{d.content}}
      
      
        
          
生效日期
          {{d.effectivedate}}
        
        
          
失效天数
          {{d.expirydate}}
        
      
      
        
          
            
          
        
        
          
            
          
        
      
    
  

先画好大概的样式，配合scss完成其中的效果，重点还是在*ngFor="let d of data"上，数据和判断按钮是否有展开div都是通过在ts当中写好的后台，而div里面的内容，我是通过格的方式来分区域，因为挺好看而且很搭的感觉

SCSS页面

.buttonscss{
        z-index:2;
        background : linear-gradient(left,white 0%,rgba(68, 68, 68, 0.2) 80%,rgba(68, 68, 68, 0.3) 100%);
        box-shadow : 0px 5px 3px -3px rgba(142, 136, 146, 0.75);//图片地下的阴影
        margin-top : 2%;
    }
    
    .divcard{
        position: relative;
        background:linear-gradient(bottom,#eeeef1,white 100%,white);
        box-shadow: 0px 4px 3px -3px rgba(142, 136, 146, 1);
        width: 90%;
        left: 5%;
        // height: 250px;
        text-align: center;
        h3{
            color: rgba(68, 68, 68, 0.85)
        }
        p{
            color: rgba(68, 68, 68, 0.75);
        }
        span{
            color: rgba(68, 68, 68, 0.75);
            font-weight: bold;
        }
        
    }

如何搭配看具体需要，我这边只是代表我个人的设计想法，值得一提的是z-index:2，让button位于div之上，不然button的阴影效果会被div挡住，这样就看不出层次感

TS页面

先创建一个集合

  data: Array<{
    titlestart: string,
    titleend: string,
    content: string,
    effectivedate: string,
    expirydate: string,
    showDetails: boolean,
    icon:string
  }> = [];

重点是showDetails和icon，这两个控制着判断是否打开和显示哪个图标，其余不必特别在意，只是为了展示效果顺便做的一点微小的工作。
在constructor中需要给data添加需要绑定的string值

this.data.push({
      titlestart: '调休',
      titleend: '2017-6-13' + '到' + '2017-6-20',
      content: '头晕发烧，去医院检查和回家休息一周，有医生开的证明，休假时间是6月13号到6月20号，望批准//测试较长的显示效果测试较长的显示效果测试较长的显示效果测试较长的显示效果测试较长的显示效果测试较长的显示效果测试较长的显示效果测试较长的显示效果测试较长的显示效果测试较长的显示效果测试较长的显示效果测试较长的显示效果测试较长的显示效果测试较长的显示效果测试较长的显示效果测试较长的显示效果',
      effectivedate: '2017-6-13',
      expirydate: '2017-6-20',
      showDetails: false,
      icon:'ios-arrow-forward'
    },
      {
        titlestart: '婚假',
        titleend: '2017-10-25' + '到' + '2017-10-29',
        content: '亲戚结婚，需要陪同和参与，时间是10月25号到10月29号共4天，望批准',
        effectivedate: '2017-10-25',
        expirydate: '2017-10-29',
        showDetails: false,
        icon:'ios-arrow-forward'
      }
    );

接下来给html中的button附加点击将调用的函数toggleDetails

toggleDetails(data) {
    if (data.showDetails) {
      data.showDetails = false;
      data.icon='ios-arrow-forward'
    } else {
      data.showDetails = true;
      data.icon='ios-arrow-down'
    }
  }

就算是大功告成了，使用起来还是很方便的，中间调试的时候出现了button图标消失或者不显示list的话，检查一下代码或者重新运行一下代码，有些特别玄乎的问题都是重新运行一下代码就解决了，ionic感觉还是有些不成熟的地方