Angular4记账webApp练手项目之二(在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">

完成

这里写图片描述

引用非样式的组件

例如提示框组件 html中添加元素

<weui-toptips [content]="toastText" #TopTip></weui-toptips>

ts文件中引入使用

import {WeUITopTips} from 'angular-weui';
 @ViewChild('TopTip') TopTip: WeUITopTips;
  toastText= '';
    add(id: number) {
       this.alert(id.toString());
  }
    /// 自己封装的消息提示
  private alert(msg) {
    this.toastText = msg;
    this.TopTip.show();
  }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Crossin的编程教室

在 Python 程序中显示进度条

转自 http://my.oschina.net/jhao104/blog/681507 1、利用标准输出 先说一下文本系统的控制符: \r: 将光标移...

3247
来自专栏Android干货

小程序实践(三):九宫格实现及item跳转

1773
来自专栏DT乱“码”

解决chrome测试的时候页面上的表单一直会自动填充

做项目时一直遇到一个问题,那就是用chrome测试的时候页面上的表单一直会自动填充,并且伴有黄色的背景颜色,有时候感觉很方便,有时候又很想去掉。 下面上下图: ...

2167
来自专栏前端说吧

Vue - 实战疑点总结

2977
来自专栏Hongten

pygame系列_mouse鼠标事件

E | hongtenzone@foxmail.com  B | http://www.cnblogs.com/hongten

2493
来自专栏Android干货

安卓开发_时间、日期选择器的简单使用

3127
来自专栏云加头条

如何开通微信公众号同步?(微信打开)

1. .点击右上角按钮「. . .」,选择在浏览器中打开网页

5567
来自专栏smy

prompt() 方法,弹框带输入框

prompt()  有alert的风格,却带着输入框,这是怎么实现的呢? 语法 prompt(text,defaultText) 参数 描述 t...

4105
来自专栏python3

tkinter -- Scrollbar

Scrollbar(滚动条),可以单独使用,但最多的还是与其它控件(Listbox,Text,Canva 等)结合使用

712
来自专栏Android干货

小程序实践(四):动态控制组件的显示/隐藏

组件有个属性:hidden='' ,值为true/false ,当false的时候说明不隐藏,当true的时候说明隐藏,注意该隐藏是不保留组件位置的。

1092

扫码关注云+社区

领取腾讯云代金券