Angular DAY05

Angular05

ionic 就是基于angular的一个自带手机端样式的组件库;

循环滚动

https://ionicframework.com/docs/api/slides

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>段子</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content *ngIf="duanzi">
    <!-- 横向滚动 i-slides -->
    <!-- 配置: https://www.swiper.com.cn/api/index.html -->
    <!-- disableOnInteraction: 手动操作swiper之后, 是否要禁止自动滚动, 默认true 禁止 -->
    <!-- delay: 滚动间隔 -->
    <!-- loop:true 循环滚动 -->
    <ion-slides
      pager
      [options]="{
        autoplay: {
          disableOnInteraction: false,
          delay: 1000
        },
        loop: true
      }"
    >
      <ion-slide *ngFor="let item of duanzi.result">
        <ion-card>
          <img [src]="item.images" alt="" />
        </ion-card>
      </ion-slide>
    </ion-slides>
  </ion-content>
</ion-app>

弹出操作

// alertC.创建(弹出框配置).then(弹出框=>{})
    this.alertC
      .create({
        header: "大标题",
        subHeader: "子标题",
        message: "详细描述信息",
        buttons: [
          {
            // 对象写法, 可以给按钮添加 点击事件
            text: "确定",
            handler: () => {
              console.log("确定按钮被点击");
            },
          },
          "取消",
        ],
      })
      .then((res) => res.present()); // 弹出框.弹出()
    // present: 弹出

Tabs标签导航

包的创建方式: 
ionic start 包名 tabs

ionic的页面
创建命令:
ionic generate page 页面名

简写:
ionic g page 页面名
ionic g page tab4
默认生成的页面, 会自动注册到全局路由文件中: UPDATE src/app/app-routing.module.ts

• 路由的添加

• UI的添加

项目包搭建
• 创建项目包: ionic start mfreshApp tabs
• 按照效果图修改标签栏的图标和文字
– 图标网站: https://ionicons.com/
• 创建 tab4 对应效果图的 登录页面
– 完成路由的配置 和 标签栏图标及文字的制作
登录页面制作
按照效果图, 实现登录页面的 界面制作
要求: 在点击登录按钮时, 可以在后台 打印出 输入框中的用户名和密码
• 难点: 参考官方组件库的 ion-content 组件介绍, 完成上下左右 边距的添加

首页

http://101.96.128.94:9999/data/product/index.php
•	按照效果图制作首页
•	接口返回的图片为相对路径, 需要拼接前缀
 	http://101.96.128.94:9999/
•	难点: 返回值的类型声明
•	logo地址: http://101.96.128.94:9999/img/header/logo.png
•	提示
–	横向滚动展示: ion-slides
–	多列布局: ion-grid
–	利用插槽可以把图片固定到左边
商品列表
http://101.96.128.94:9999/data/product/list.php?pno=2
•	带有分页操作: 下拉刷新 和 加载更多
•	接口返回的图片为相对路径, 需要拼接前缀
 	http://101.96.128.94:9999/

标签：http,DAY05,9999,101.96,ionic,Angular,128.94,页面
来源： https://blog.csdn.net/weixin_50883365/article/details/117689298