在angular4項目中使用Angular WeUI


寫在前面

在angular4項目中
例子是基於之前文章:利用angular-cli構建Angular4.X項目
可以參考官網:https://cipchk.github.io/ngx-weui/#/docs/start

本來是寫在后面的回顧,感覺放在前面比較好。

1、如何使用第三方庫,安裝-引用(主要參考官方文檔)
2、{{}}指令,單向綁定數據,聲明數據-綁定數據
3、[(ngModel)]指令,雙向綁定數據,聲明數據-綁定數據
4、*ngFor指令,循環渲染
5、[ngStyle] 指令,動態綁定樣式。
更多angular指令及用法參看官網。

安裝及引用

安裝

npm install angular-weui --save

安裝后還需要引用weui 樣式以及我們的font-awesome圖標苦,在我們項目index.html中引用

<!-- index.html -->
<link href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

我們還要在app.module.ts中添加引用

import { WeUIModule } from 'angular-weui';

imports: [
BrowserModule,
FormsModule,
HttpModule,
WeUIModule // 這里也要添加
],

修改菜單組件

在app.component.html添加菜單組件

<app-menu></app-menu>

我們參照官網簡化使用了tabbar組件,修改menu.component.html如下:

<weui-tabbar>
<weui-tabbar-item>
<span class="weui-tabbar__icon">
<i class="fa fa-edit"></i>
</span>
<p class="weui-tabbar__label">記賬</p>
</weui-tabbar-item>
<weui-tabbar-item>
<span class="weui-tabbar__icon">
<i class="fa fa-bar-chart"></i>
</span>
<p class="weui-tabbar__label">統計</p>
</weui-tabbar-item>
</weui-tabbar>

瀏覽器中查看,菜單成功創建

這里寫圖片描述

修改記賬組件

在app.component.html添加記賬組件

<app-menu></app-menu>
<app-accounting></app-accounting>

在accounting.component.ts中添加一些數據如下:

export class AccountingComponent implements OnInit {
money = ''; // 金額
billTypes = []; // 記賬類型
constructor() {
let n = 0;
while (n < 20) { // 模擬一些數據
this.billTypes.push({name: '食物', id: n});
n++;
}
}
ngOnInit() {

}

}

修改accounting.component.html文件布局,添加標題,金額輸入框,記賬類型選擇按鈕

<!-- 標題 -->
<weui-navbar >
<weui-navbar-item >理財從記賬開始</weui-navbar-item>
</weui-navbar>

<div style="margin-top: 50px;">
<!-- 金額輸入框 -->
<weui-input type="number" name="num" placeholder="請輸入金額" [(ngModel)]="money">
<label class="weui-label"></label>
</weui-input>
<!-- 九宮格按鈕 -->
<div class="weui-grids">
<a href="javascript:;" class="weui-grid" *ngFor="let b of billTypes">
<div class="weui-grid__icon">
<i class="fa fa-2x fa-bar-chart"></i>
</div>
<p class="weui-grid__label">
{{b.name}}</p>
</a>
</div>
</div>

在頁面中查看,發現底部菜單和頂部標題,也跟着滾動。
這里寫圖片描述

解決上面問題,有兩個思路,1、固定底部和頂部,2、固定中間按鈕。
我選擇固定中間按鈕,使用動態綁定樣式讓中間部分的高度等於頁面高度-底部和頂部的高度,設置overflo為scroll;
在accounting.component.ts中添加樣式數據如下:

  contentStyle = {   // 綁定的樣式
'overflow': 'scroll',
'height': window.screen.availHeight - 145 + 'px'
};

在accounting.component.html綁定樣式

<div class="weui-grids" [ngStyle]="contentStyle">

完成

這里寫圖片描述


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com