Angular DAY05

2021-06-08 09:31:00 阅读：228 来源： 互联网

标签：http DAY05 9999 101.96 ionic Angular 128.94 页面

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Angular DAY05

Angular05

循环滚动

弹出操作

Tabs标签导航