【前言】
新生页面里面有一个公约，是手风琴样式的页面。这种样式比较美观，也能节省页面空间。关于手风琴样式页面的制作方式，和大家分享一下~
一、实现思路：
引用bootstrap样式中的accordion组件实现。
二、代码实现：
1、module文件：
引入手风琴扩展包：
import { AccordionModule } from 'ngx-bootstrap/accordion';
2、html文件：
<div class="container">
<!-- 只显示一条公约 -->
<accordion (ngModel)="oneAtATime" [closeOthers]="oneAtATime">
<accordion-group #group *ngFor="let convention of conventionList">
<div accordion-heading class="customClass">
{{convention.conventionName}}
<!-- 加上>符号 -->
<i class="pull-right float-xs-right glyphicon" [ngClass]="{'glyphicon-chevron-down': group?.isOpen, 'glyphicon-chevron-right': !group?.isOpen}"></i>
</div>
<div accordion-body>
{{convention.content}}
</div>
</accordion-group>
</accordion>
<input type="checkbox" class="convention" name="GongYue" value="TongYi">我已认真阅读，同意履行公约<br>
</div>
3、css文件：
.convention{
margin-top:1%;
margin-left:80%;
}
.customClass {
border:solid 1px #33CCFF;
background-color: #D9EDF7;
}
4、component.ts文件：
import { Component, OnInit } from '@angular/core';
import { FreshmanConventionService } from './freshman-convention.service';
@Component({
selector: 'app-freshman-convention',
templateUrl: './freshman-convention.component.html',
styleUrls: ['./freshman-convention.component.css'],
providers: [FreshmanConventionService]
})
export class FreshmanConventionComponent implements OnInit {
private url:string="http://192.168.22.202:8080/singleTableMaintain-web/convention/findConvention"; //url接口
public oneAtATime: boolean = true;
conventionList: any[]
constructor(private freshmanConventionService: FreshmanConventionService) { }
ngOnInit() {
this.getConvention(); //添加公约内容
}
getConvention(){
this.freshmanConventionService.getConvention(this.url).subscribe(
conventionList => {
this.conventionList = conventionList.data;
},
error => console.error(error)
)
}
}
5、service.ts文件：
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class FreshmanConventionService {
private headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
private heroesUrl = 'api/heroes'; // URL to web api
private Configuration: any;
constructor(private http: Http) {
}
//错误处理
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || "serve error");
}
//调用远程地址，获取数据 get方法
//返回response的json串
public getData(): Promise<any> {
return this.http
.get("src/mock-data/freshman-convention.json")
.toPromise()
.then(response => response.json() as any)
.catch(this.handleError);
}
public getConvention(url:string): Observable<any> {
let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
let options = new RequestOptions({ headers: headers });
return this.http.get(url, options)
.map((res: Response) => res.json() as any)
.catch(this.handleError);
}
}
6、页面展示：
合上状态：
点开状态：
【小结】
手风琴样式页面制作方式在网上资料甚少，希望本篇博客能给大家一些思路和帮助。
