Angular 入门(三) 手机端开发

最新推荐文章于 2024-06-11 09:37:04 发布
最新推荐文章于 2024-06-11 09:37:04 发布
阅读量1.1k 收藏 2
点赞数
文章标签： vue java js javascript typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46027468/article/details/118781423
版权

上篇总结:

  • 管道 pipe

               相当于vue中的过滤器. 使用时: {{值 | 管道名:参数:参数...}}

               angular默认官方提供了一些常用管道, 可以直接使用

               也提供了自定义的方式: ng g p 管道名

  • 指令 directive

               生成命令: ng g d 指令名, 用于操作元素的 DOM 属性

  • 生命周期

               初始化 ngOnInit -> 挂载时 init -> 更新时 checked -> 销毁 destroy

  • 组件间的参数传递

–            父子: 子中用 @Input() 关键词声明属性即可

–            子父: 子中要声明事件, 向外传递数据 @Output(), 父通过事件方式 传递一个 自身方法 给子, 子触发传入的方法 向方法中传递数据

–            兄弟: 子1 -> 父 -> 子2 或 服务进行全局状态管理.

  • 服务: 同vue 的 Vuex

               生成服务命令: ng g s 服务名

               使用时, 要通过 依赖注入 机制来完成.

–            依赖注入: 在构造函数的参数 中声明类型, 组件在使用时 就必须传递对应的类型的值.

–            其中: 我们负责声明依赖即可; 注入操作由系统自动完成;

               语法糖用法: constructor(权限词 参数名: 服务类型)

  • 网络服务: 官方提供了很多强大的服务, 网络服务是其中一种

–            网络模块默认未加载, 必须到 app.module.ts 文件中加载才可以

 话不多说直入主题 ;接下来介绍手机端的开发

 Ionic_________________

 Vue 有 mintUI, 制作手机端的界面

Angular 有 ionic, 制作手机端的 UI库

脚手架的安装:

npm install -g @ionic/cli --force

生成项目包

ionic start ionicApp blank
//     生成   包名      类型((blank/sidemenu/tabs)
/**
*- blank: 基础包
*- tabs: 带有标签栏导航的包
*- sidemenu: 带有侧边栏导航的包
/

包的运行:

ionic s

vscode插件:

 主要容器:

  • ion-app: 根容器
  • ion-header: 头部导航栏容器
  • ion-content: 主体内容部分
  • ion-footer: 底部容器

 更多组件详细介绍请点这里

 button按钮组件

<!-- 按钮组件 -->
<!-- https://ionicframework.com/docs/api/button -->
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>按钮</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <!-- 组件的风格, 默认会自动适配所在操作系统 -->
    <ion-button>我是按钮</ion-button>

    <!-- mode: 指定风格 -->
    <ion-button mode="ios">ios</ion-button>
    <ion-button mode="md">android</ion-button>

    <!-- 官方自带很多主题  theme -->
    <br />
    <ion-button color="primary">primary</ion-button>
    <ion-button color="secondary">secondary</ion-button>
    <ion-button color="tertiary">tertiary</ion-button>
    <ion-button color="success">success</ion-button>
    <ion-button color="warning">warning</ion-button>
    <ion-button color="danger">danger</ion-button>
    <ion-button color="light">light</ion-button>
    <ion-button color="medium">medium</ion-button>
    <ion-button color="dark">dark</ion-button>

    <!-- 大小 -->
    <br />
    <ion-button size="small">small</ion-button>
    <ion-button size="default">default</ion-button>
    <ion-button size="large">large</ion-button>

    <!-- 填充方式 -->
    <br />
    <ion-button fill="outline">outline</ion-button>
    <ion-button fill="solid">solid</ion-button>
    <ion-button fill="clear">clear</ion-button>

    <!-- 扩展方式 -->
    <br />
    <ion-button expand="block">block</ion-button>
    <ion-button expand="full">full</ion-button>

    <!-- 不可用 -->
    <br />
    <ion-button disabled>不可用</ion-button>
  </ion-content>
</ion-app>
View Code

bdge徽章

<!-- 徽章组件 badge -->
<!-- https://ionicframework.com/docs/api/badge -->
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>badge徽章</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-badge>42</ion-badge>
    <ion-badge color="success">success</ion-badge>
    <ion-badge mode="ios" color="danger">ios</ion-badge>
  </ion-content>
</ion-app>
View Code

icon图标

<!-- 图标库 -->
<!-- https://ionicons.com/ -->
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>icon</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-icon name="add" style="font-size: 30px"></ion-icon>

    <ion-icon name="logo-alipay" style="font-size: 50px" color="secondary"></ion-icon>
    <!-- 可以搭配按钮使用 -->
    <ion-button>
      <ion-icon name="add"></ion-icon>
    </ion-button>
  </ion-content>
</ion-app>
View Code

card卡片组件

<!-- 卡片组件 -->
<!-- https://ionicframework.com/docs/api/card -->
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>卡片</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <!-- i-card-full -->
    <ion-card>
      <img src="http://101.96.128.94:9999/mfresh/news_imgs/01.jpg" alt="" />
      <ion-card-header>
        <ion-card-subtitle>此净化器功能优秀, 节能减排, 价格优美.</ion-card-subtitle>
        <ion-card-title>净美仕净化器</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        打掉的的阿达的看了看.马卡龙文件但大家拿健康的宽带连接我已大奖等你
      </ion-card-content>
    </ion-card>
  </ion-content>
</ion-app>
View Code
横向滚动展示 
<!-- 横向滚动展示 -->
<!-- https://ionicframework.com/docs/api/slides -->
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>横向滚动展示</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <!-- slides: 容器;   slide: 项目 -->

    <!-- pager: 页数指示 -->
    <!-- loop: 循环滚动 -->
    <!-- autoplay: 自动滚动 -->
    <!-- disableOnInteraction: 用户触摸之后 让自动滚动失效;  默认为true -->
    <ion-slides
      pager
      [options]="{ loop: true, autoplay: { disableOnInteraction: false } }"
    >
    <!-- 在ts文件先定义好图片路径的数组 -->
      <ion-slide *ngFor="let item of images">
        <img [src]="item" alt="" />
      </ion-slide>
    </ion-slides>
  </ion-content>
</ion-app>
View Code

 grid栅格

<!-- 栅格布局 -->
<!-- https://ionicframework.com/docs/api/grid -->

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>栅格布局</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <!-- i-grid -->
    <!-- 在scss中定义样式grid-lianxi -->
    <ion-grid fixed class="grid-lianxi">
      <ion-row>
        <!-- 每行最多12列,  size代表列数 -->
        <ion-col size="6">6</ion-col>
        <ion-col size="6">6</ion-col>
      </ion-row>

      <ion-row>
        <!-- 超出会换行 -->
        <ion-col size="4">4</ion-col>
        <ion-col size="5">5</ion-col>
        <ion-col size="6">6</ion-col>
        <ion-col size="7">7</ion-col>
      </ion-row>

      <ion-row>
        <ion-col size="3">3</ion-col>
        <!-- 不写会自动填充剩余份数 -->
        <ion-col>不写份数</ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>
</ion-app>
View Code

 综合这些组件的一个例子

html:

<!-- 新闻 -->
<ion-app>
  <ion-header>
    <ion-toolbar color="danger">
      <ion-title>网易新闻</ion-title>
    </ion-toolbar>
  </ion-header>

  <!-- scrollEvents: 允许监听滚动事件, 默认false -->
  <!-- ionScroll: 滚动事件 -->
  <ion-content
    *ngIf="news"
    #content
    [scrollEvents]="true"
    (ionScroll)="onScroll($event)"
  >
    <!-- 下拉刷新 -->
    <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
      <ion-refresher-content></ion-refresher-content>
    </ion-refresher>

    <ion-grid fixed class="news-grid">
      <ion-row>
        <ion-col size="6" *ngFor="let item of news.result">
          <ion-card>
            <img [src]="item.image" alt="" />
            <div class="content">
              <div>{{ item.title }}</div>
              <div>{{ item.passtime }}</div>
            </div>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>

    <!-- 加载更多 -->
    <!-- threshold: 触底阈值. 10% 代表剩余未显示区域的高度 是 显示区域高度 10% 时触发触底操作 -->
    <ion-infinite-scroll
      threshold="10%"
      position="bottom"
      (ionInfinite)="loadData($event)"
    >
      <ion-infinite-scroll-content
        loadingSpinner="dots"
        loadingText="加载中..."
      >
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>

    <!-- 悬浮按钮: 可以悬浮在已有内容的上方 -->
    <!-- vertical: 竖向, 可选值 top/center/bottom 对应 上/中/下 -->
    <!-- horizontal: 横向, 可选值 start/center/end -->
    <ion-fab
      [hidden]="!showGoTop"
      vertical="bottom"
      horizontal="end"
      slot="fixed"
    >
      <ion-fab-button (click)="goTop()">
        <ion-icon name="arrow-up-outline"></ion-icon>
      </ion-fab-button>
    </ion-fab>
  </ion-content>
</ion-app>
View Code

scss:

.grid-lianxi {
  border: 1px solid red;

  ion-row {
    border: 2px solid orange;

    ion-col {
      border: 1px solid blue;
    }
  }
}

.news-grid {
  padding: 3px;

  img {
    width: 100%;
  }

  ion-col {
    padding: 3px;
  }

  ion-card {
    margin: 0;

    .content {
      padding: 4px;

      div:first-child {
        color: black;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 1.1em;
        margin-bottom: 3px;
      }
    }
  }
}
View Code

ts:

import { HttpClient } from '@angular/common/http';
import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  // 掌控子元素, 绑定变量 content 到 ion-content 组件
  @ViewChild('content') content: IonContent;

  showGoTop = false; //是否要显示 回到顶部 按钮

  // 绑定到 ion-conent 的滚动监听事件, 当滚动时自动触发
  onScroll(event) {
    console.log(event);

    const y = event.detail.currentY; //当前竖向滚动的 y
    //如果 y > 1200 就显示回到头部按钮
    this.showGoTop = y > 1200;
  }

  goTop() {
    // scrollToTop(动画时长);  单位毫秒
    this.content.scrollToTop(250);
  }

  constructor(public http: HttpClient) {}

  getUrl(pno: number) {
    return 'https://api.apiopen.top/getWangYiNews?page=' + pno;
  }

  news: News;

  ngOnInit(): void {
    const url = this.getUrl(1);

    this.http.get(url).subscribe((res: News) => {
      console.log(res);

      this.news = res;
    });
  }

  page = 1;

  //下拉刷新
  doRefresh(event) {
    console.log('下拉刷新触发!');
    const url = this.getUrl(1);
    this.http.get(url).subscribe((res: News) => {
      console.log(res);

      this.news = res;
      this.page = 1; //重置为 第一页

      event.target.complete(); //结束下拉刷新动画的显示
    });
  }

  // 触底时触发
  loadData(event) {
    // console.log(event);

    const url = this.getUrl(this.page + 1);

    this.http.get(url).subscribe((res: News) => {
      console.log(res);
      // 合并新旧数据中的数组
      res.result = this.news.result.concat(res.result);

      this.news = res;

      this.page++; //成功后, 页数+1

      //通知组件此次加载操作已完成;   这样组件才会监听下一次
      event.target.complete();
    });
  }

  images = [
    'http://101.96.128.94:9999/mfresh/images/banner_01.jpg',
    'http://101.96.128.94:9999/mfresh/images/banner_02.jpg',
    'http://101.96.128.94:9999/mfresh/images/banner_03.jpg',
    'http://101.96.128.94:9999/mfresh/images/banner_04.jpg',
  ];
}

/////
///// 返回值结构声明
interface News {
  code: number;
  message: string;
  result: NewsResult[];
}

interface NewsResult {
  image: string;
  passtime: string;
  path: string;
  title: string;
}
View Code

 item组件

<!-- item组件 -->
<!-- https://ionicframework.com/docs/api/item -->
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>item</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-item>
      <ion-label>Awesome Label</ion-label>
    </ion-item>

    <!-- button: 可以点击 -->
    <!-- detail: 右侧出现 箭头图标 -->
    <ion-item button detail>
      <ion-label>Click me</ion-label>
    </ion-item>

    <ion-item>
      <!-- slot: 插槽;   item具有左右两个插槽, start 和 end -->
      <ion-badge slot="end">42</ion-badge>
      <ion-label>Item Avatar</ion-label>
    </ion-item>

    <ion-item>
      <!-- avatar: 把内部图片变圆形 -->
      <ion-avatar slot="start">
        <img
          src="http://www.gx8899.com/uploads/allimg/2017112908/pc2e3vft403.jpg"
        />
      </ion-avatar>
      <ion-label>
        <h3>重庆天花板</h3>
        <p>今天的面试题超级简单, 妥妥的~</p>
      </ion-label>
      <ion-badge color="danger" slot="end">42</ion-badge>
    </ion-item>

    <ion-item>
      <ion-icon name="settings" slot="start"></ion-icon>
      <ion-label>设置</ion-label>
    </ion-item>

    <ion-item lines="none">
      <ion-label>没有分割线</ion-label>
    </ion-item>

    <ion-item lines="full">
      <ion-label>分割线充满</ion-label>
    </ion-item>

    <ion-item>
      <ion-label>用户名:</ion-label>
      <ion-input placeholder="账号/手机号/邮箱"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>密码:</ion-label>
      <ion-input placeholder="密码" type="password"></ion-input>
    </ion-item>

    <!-- 分组 -->
    <ion-item-group>
      <ion-item-divider>
        <ion-label>A</ion-label>
      </ion-item-divider>

      <ion-item>
        <ion-label>阿宝</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>阿花</ion-label>
      </ion-item>

      <ion-item-divider>
        <ion-label>B</ion-label>
      </ion-item-divider>

      <ion-item>
        <ion-label>宝蓝</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>boner</ion-label>
      </ion-item>
    </ion-item-group>

    <!-- i-item-sliding: 通过滑动 显示隐藏操作 -->
  </ion-content>
</ion-app>
View Code

例:网络模块+组件+跨域

html:

<ion-app>
  <ion-header>
    <ion-toolbar color="warning">
      <ion-title>直播列表</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content *ngIf="res" #content [scrollEvents]="true" (ionScroll)="onScroll($event)">
    <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
      <ion-refresher-content></ion-refresher-content>
    </ion-refresher>

    <ion-grid fixed class="douyu-grid">
      <ion-row>
        <ion-col size="6" *ngFor="let item of res.data.list">
          <ion-card>
            <div class="card-header">
              <img [src]="item.roomSrc" alt="" />
              <div class="hn">{{ item.hn }}</div>
              <div class="nick">
                <ion-avatar>
                  <img [src]="item.avatar" />
                </ion-avatar>
                <span>{{ item.nickname }}</span>
              </div>
            </div>
            <div class="room-name">{{ item.roomName }}</div>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>

    <!-- i-infinite-scroll -->
    <ion-infinite-scroll threshold="10%" position="bottom" (ionInfinite)="loadData($event)">
      <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载中...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>

    <!-- 悬浮按钮 -->
    <ion-fab [hidden]="!showGoTop" vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button (click)="goTop()">
        <ion-icon name="arrow-up-outline"></ion-icon>
      </ion-fab-button>
    </ion-fab>
  </ion-content>
</ion-app>
View Code

ts:(注意在app.module.ts中引入HttpClientModule模块)

import { HttpClient } from '@angular/common/http';
import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  @ViewChild('content') content: IonContent;

  showGoTop = false;

  onScroll(e) {
    this.showGoTop = e.detail.currentY > 1000;
  }

  goTop() {
    this.content.scrollToTop(200);
  }

  getUrl(page: number) {
    // 请求地址以 /douyu 开头,  代理就会进行解析
    return `/douyu/api/room/list?page=${page}&type=yz`;
  }

  // 依赖注入机制: 声明依赖
  constructor(public http: HttpClient) { }

  res: Douyu;

  // 下拉刷新
  doRefresh(e) {
    const url = this.getUrl(1);

    this.http.get(url).subscribe((res: Douyu) => {
      this.res = res;

      e.target.complete(); //终止下拉刷新动画
    });
  }

  // 加载更多
  loadData(e) {
    const url = this.getUrl(this.res.data.nowPage + 1);

    this.http.get(url).subscribe((res: Douyu) => {
      //合并新旧数据数组,  然后把新的数据 替换旧的
      res.data.list = this.res.data.list.concat(res.data.list);

      this.res = res;

      e.target.complete(); // 声明本次加载更多操作已完成,  准备下一次
    });
  }

  ngOnInit(): void {
    this.http.get(this.getUrl(1)).subscribe((res: Douyu) => {
      console.log(res);
      this.res = res;

      // 默认数据量8条: 不足以充满整个页面, 就会导致没有触底操作
      // 再请求第二页数据 与第一页合并在一起
      this.http.get(this.getUrl(2)).subscribe((res: Douyu) => {
        res.data.list = this.res.data.list.concat(res.data.list);

        this.res = res;
      });
    });
  }
}

/////
///// 返回值的数据结构声明
interface Douyu {
  code: number;
  data: DouyuData;
}

interface DouyuData {
  cate2Id: number;
  list: DouyuDataList[];
  nowPage: number;
  pageCount: number;
}

interface DouyuDataList {
  avatar: string;
  cate1Id: number;
  cate2Id: number;
  hn: string;
  isLive: number;
  isVertical: number;
  liveCity: string;
  nickname: string;
  rid: number;
  roomName: string;
  roomSrc: string;
  verticalSrc: string;
  vipId: number;
}
View Code

scss:

.douyu-grid {
    padding: 3px;
  
    ion-col {
      padding: 3px;
  
      ion-card {
        margin: 0;
  
        img {
          width: 100%;
        }
      }
    }
  }
  
  .card-header {
    position: relative;
  
    .hn {
      position: absolute;
      top: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      padding: 4px;
    }
  
    .nick {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      background-color: rgba(0, 0, 0, 0.5);
      align-items: center;
      color: white;
      right: 0;
  
      ion-avatar {
        width: 20px;
        height: 20px;
        margin: 3px;
      }
    }
  
    img {
      display: block;
    }
  }
  
  .room-name {
    padding: 4px;
    color: black;
  
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
View Code

创建src目录下proxy.config.json文件跨域  在angular.json中引入

a small tree
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
angular写的移动端模板《一》
05-31 1720
背景 我司的技术栈 angular + material 目的 减少开发量 减少重复工作 常用的组件拿来即用，不用造轮子 代码自动生成 简而言之 实现移动端的ng-alain 解决思路 构建工程，工程中包含常见的服务： 鉴权、拦截、路由、布局等 封装业务常用的组件，形成可配置化组件（类似于ng-alain的动态表单 st,sf） 将工程发布在行内镜像，可以通过ng add添加，一键生成工程代...
angularjs的angular-tree-dnd、angular-tree-control树结构控件简单使用
weixin_43996999的博客
07-22 2254
个人总结 前言：项目已经上线，但还是有挺多功能不怎么了解，例如：菜单管理、用户管理、权限、数据字典等等，今天在这里简单的梳理一下项目中的菜单管理功能(今天刚看了大半天，怕后面忘了，赶紧写上！) 做树形图的话用angular-ui-tree比较方便，但这个控件并不支持树形表格 先说说数据格式的问题，说到树形图，很多人脑子里出现的数据格式可能就是子节点套在父节点里面，子子节点再套在子节点里面，一...
Mobile Angular UI
ABS1118的专栏
03-12 1986
Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的响应式移动开发HTML5框架。 Mobile Angular UI的关键字有： Bootstrap 3AngularJSBootstrap 3 Mobile组件，比如switches, overlays和sidebars，这些都是bootstrap中没有的。AngularJS modules， 比如
使用AngularJS与PhoneGap构建跨平台移动应用：grunt-angular-phonegap
最新发布
gitblog_00014的博客
06-11 333
使用AngularJS与PhoneGap构建跨平台移动应用：grunt-angular-phonegap 项目地址:https://gitcode.com/dsimard/grunt-angular-phonegap 项目介绍 grunt-angular-phonegap 是一个强大的Grunt插件，它将AngularJS的 Yeoman 模板生成器和PhoneGap完美结合，使您能够轻松地开发和...
移动开发 H5开发angular4教程
11-27
移动开发 H5开发angular4教程 移动开发 H5开发angular4教程
Angular4记账webApp练手项目之一（利用angular-cli构建Angular4.X项目）
易兒善
09-19 7313
前提 1、已经安装了node.js环境 2、已经安装了npm环境 windows可以通过cmd输入以下指令查看 node -v // node版本 npm -v // npm版本安装angular-cli 脚手架npm install -g @angular/cli安装失败可以尝试下面方法，先卸载清楚缓存，再安装npm uninstall -g @angular/cli npm
手机开发和web开发中很实用的图表插件
01-05
在手机开发和Web开发中，数据可视化是一项至关重要的任务，而图表插件则扮演着将复杂数据转化为易于理解图形的角色。本文将详细探讨一个适用于这两种平台的实用图表插件——"icharjs图表插件"。 icharjs是一款专为...
一个常见的评论列表入门Demo.rar
07-30
2. **框架和库**：现代Web开发中，可能会使用React、Vue或Angular等前端框架来构建这样的系统。它们提供组件化的开发方式，简化DOM操作，并且具有强大的状态管理和生命周期管理功能。 3. **API接口**：评论数据通常...
简单入门新闻发布系统_新闻文章发布系统.rar
09-09
现代前端框架如React、Vue或Angular可以提高开发效率和用户体验。 4. **后端开发** 后端处理用户的请求和数据操作，主要技术包括服务器端编程语言（如PHP、Python、Java、Node.js）、Web框架（如Django、Flask、...
metronic v5.0.3最新版
03-01
3. **预置组件和插件**：Metronic包含了大量的UI组件，如导航、按钮、表单、图表、模态框等，以及第三方插件如jQuery、DataTables、SweetAlert等，大大简化了开发过程。 二、Angular集成与优势 1. **Angular支持**...
基于angular的移动端日期选择插件
08-10
基于angular的移动端日期选择插件
angular封装slider滑动条组件（支持小数）
盼盼盼的博客
06-19 2007
文章目录1.先展示滑动条效果2.使用angular命令快速创建组件3.代码4.在项目中引用创建的组件 1.先展示滑动条效果 2.使用angular命令快速创建组件 ng g c component/slider 打开slider.component.ts文件，可以看到selector的值是app-steps import { Component, OnInit} from '@angular/...
AngularJS实际项目应用——移动端设计
Challenge Next Challenge
02-21 3059
按照现在主流的做法，采用响应式设计，应该不在区分移动端和PC端，但由于项目历史遗留的问题，或者说为了开发速度，还是需要单独的移动端设计。其实我觉得单独的移动端开发也有好处，可以充分利用移动端的各种设计模式以及用户使用习惯，最大限度的使用移动框架的各种组件。 本项目采用了分开的设计，看一下项目总体目录结构： 移动端的代码都在app_m下面，里面的目录结构和app几乎一样，但可以省略一些文
《Angular2入门系列实践》——适应手机实现触屏滑动
你看到的逆袭，只不过是一场预备很久，草蛇灰线，伏笔千里的反攻
08-20 2349
【前言】 最近在ITOO的随堂小练中有一个滑屏的效果，为了实现效果，我在页面中引进了swiper.js插件，但是在这个过程中还是学习了一些东西！ 【内容】 1.首先下载swiper.js和swiper.css放置到项目的assets文件下 2.然后将js的代码放置到angular的index.html的页面，这个是项目的起始页，只要项目加载，就会加载swiper的js
局域网调试本地Angular项目的方法
喻志强的博客
06-28 1577
手机访问本地Angular项目
Angular2 移动端手势识别与实现1
weixin_40564006的博客
05-31 2150
公司APP项目基于Angular2+Ionic 最近需要实现一个支持向上\向下滑动显示不同内容的页面,实际实现时发现有如下的坑:1.移动端有自己的默认上滑\下滑事件,并不识别Ionic自带的识别指令,只能识别on-swipe指令且只支持左右滑动  on-swipe-up 和 on-swipe-down 指令完全无法使用2.如果自己实现必须要捕获触摸事件,TypeScript中事件捕获要么使用传统的...
移动端刷新组件XtnScroll--Angular4实现
xiaotuni的专栏,每天进步一点点
08-04 3532
刷新组件- 主要是学习一下Angular4所有花了我一天时间，写了这个刷新组件。 以项目开发当中，特别是手机移动端开发的时候，经常要用到就是上拉加载下一面，下拉刷新获取最新数据的功能。 在网也有很多类似的组件，前段时间用ReactJs写的项目的时候，就经常要用到，要是项目当时间也紧，从网找了一些，用来总是不那么顺手，后来干脆就自己写，这样也好控制。 在用第三库的，有个很大问题，就是样式，第三库的样式
Angular 2入门指南：组件开发与TypeScript应用
本书以实例为导向，旨在帮助读者通过实践掌握Angular 2的核心概念和组件化开发模式。作者和评审者的详细介绍，以及来自Packt Pub的专业支持，为读者提供了丰富的学习资源。 在书中，作者首先介绍了Angular 2的基本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

a small tree

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值