Web开发笔记:Ionic实现表格展示数据

最新推荐文章于 2021-08-05 10:25:35 发布
最新推荐文章于 2021-08-05 10:25:35 发布
阅读量898 收藏 3
点赞数
分类专栏： Web开发学习笔记 文章标签： Ionic 表格 数据展示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/justwanttofly/article/details/106131234
版权

1.accountgrid.page.html

<ion-content style="overflow: scroll;" (ionScroll)="ionScroll()" scroll-events='true' id='Content'>

    <!-- 查询条件  -->
    <div id="CONTENT_TOP" style="width: 100%; border: tomato 1px solid;">
        <form (submit)='selectData(conditionsInfo)' action="" method="POST">
            <ion-row>
                <ion-col size="auto" class="ion_col_self_css">
                    <ion-label> 记账日期: </ion-label>
                </ion-col>
                <ion-col size="4">
                    <ion-datetime [(ngModel)]="conditionsInfo.START_TIME" name='START_TIME'
                        class="el_border_radiusAndbackcolor" display-format='YYYY-MM-DD' placeholder="" cancelText="取消"
                        doneText="确定"></ion-datetime>
                </ion-col>
                <ion-col size="auto" class="ion_col_self_css">
                    <ion-label> - </ion-label>
                </ion-col>
                <ion-col size="4">
                    <ion-datetime [(ngModel)]="conditionsInfo.END_TIME" name='END_TIME'
                        class="el_border_radiusAndbackcolor" display-format='YYYY-MM-DD' placeholder="" cancelText="取消"
                        doneText="确定"></ion-datetime>
                    <!-- <app-date-time-picker [(ngModel)]="conditionsInfo.MONEY_USE_TIME" name='MONEY_USE_TIME'></app-date-time-picker> -->
                </ion-col>

            </ion-row>
            <ion-row>
                <ion-col size="auto" class="ion_col_self_css">
                    <ion-label> 收支类型: </ion-label>
                </ion-col>
                <ion-col size='4'>
                    <ion-select [(ngModel)]="conditionsInfo.PaymentType" name='PaymentType'
                        class="el_border_radiusAndbackcolor" placeholder="" interface="popover" cancelText="取消"
                        okText="确定">
                        <!-- 动态循环添加选择项 -->
                        <ion-select-option *ngFor="let item of PaymentType" value="{{item.value}}">
                            {{item.description}}
                        </ion-select-option>
                    </ion-select>
                    <!-- <ion-input [(ngModel)]="newData.UseType" name='UseType' type="text"> </ion-input> -->
                </ion-col>
            </ion-row>
            <!-- <ion-searchbar placeholder="" animated showCancelButton cancelButtonText=""></ion-searchbar> -->
            <ion-row>
                <ion-col class="ion_col_self_css">
                    <ion-button id='selectBtn' expand='full' color="primary" type='submit'> 查询 </ion-button>
                </ion-col>
            </ion-row>
        </form>
    </div>
    <!-- 查询条件  -->
    <!-- slot="fixed":固定在底部,使悬浮按钮不会随着页面滚动 -->
    <ion-fab id="addData_FabBtn" vertical="bottom" horizontal="end" slot="fixed">
        <!-- 返回顶部功能 -->
        <ion-fab-button hidden id='BackTop' (click)="backContentTop()" size='small'>
            <ion-icon name="xu-fanhuidingbu1"></ion-icon>
        </ion-fab-button>
    </ion-fab>

    <div id="CONTENT_BOTTOM" style="overflow-x:scroll;position: fixed; border:rgb(0, 60, 255) 1px solid;">

        <ion-grid style="overflow-x: scroll;width:215%;">
            <!-- <ion-row *ngFor="let row of rowCount">
                <ion-col class="grid_col_rgb" *ngFor="let col of colCount">{{col}}</ion-col>
            </ion-row> -->
            <div id='firstRow' class="firstRow_scroll_Default">
                <ion-row>
                    <ng-container *ngFor="let col of colCount">
                        <ng-container *ngIf="col==='使用说明'; else elseTemplate">
                            <ion-col class="grid_col_rgb_header" size='3'> {{col}}</ion-col>
                        </ng-container>
                        <ng-template #elseTemplate>
                            <ion-col class="grid_col_rgb_header" size='1'>{{col}}</ion-col>
                        </ng-template>
                    </ng-container>
                </ion-row>
            </div>
            <div style="width: 150%;">
                <ng-container *ngFor="let item of QueryData;let i=index">
                
                <ng-container *ngIf="i%2===0; else elseTemplate">
                    <ion-row>
                        <ion-col size='1' class="grid_col_rgb_o">{{item.MONEY_USE_TIME}}</ion-col>
                        <ion-col size='1' class="grid_col_rgb_o">{{item.AMOUNT}}</ion-col>
                        <ion-col size='3' class="grid_col_rgb_o">{{item.MONEY_USE_DESC}}</ion-col>
                        <ion-col size='1' class="grid_col_rgb_o">{{item.PaymentWayDesc}}</ion-col>
                        <ion-col size='1' class="grid_col_rgb_o">{{item.UseTypesDesc}}</ion-col>
                        <ion-col size='1' class="grid_col_rgb_o">{{item.NAME}}</ion-col>
                        <ion-col size='1' class="grid_col_rgb_o">{{item.PaymentTypeDesc}}</ion-col>
                        <ion-col size='1' class="grid_col_rgb_o">{{item.ACCOUNT_DATE}}</ion-col>
                    </ion-row>
                </ng-container>
                <ng-template #elseTemplate>
                    <ion-row >
                        <ion-col size='1' class="grid_col_rgb_j">{{item.MONEY_USE_TIME}}</ion-col>
                        <ion-col size='1' class="grid_col_rgb_j">{{item.AMOUNT}}</ion-col>
                        <ion-col size='3' class="grid_col_rgb_j">{{item.MONEY_USE_DESC}}</ion-col>
                        <ion-col size='1' class="grid_col_rgb_j">{{item.PaymentWayDesc}}</ion-col>
                        <ion-col size='1' class="grid_col_rgb_j">{{item.UseTypesDesc}}</ion-col>
                        <ion-col size='1' class="grid_col_rgb_j">{{item.NAME}}</ion-col>
                        <ion-col size='1' class="grid_col_rgb_j">{{item.PaymentTypeDesc}}</ion-col>
                        <ion-col size='1' class="grid_col_rgb_j">{{item.ACCOUNT_DATE}}</ion-col>
                    </ion-row>
                </ng-template>
            </ng-container>
                
            </div>
        </ion-grid>
    </div>

</ion-content>

 

2.accountgrid.page.ts

import { Component, OnInit ,Renderer2,ElementRef} from '@angular/core';
import { TabsPage } from "../tabs/tabs.page";
import { GlobalVariable } from "../global-variable/global-variable";
import { DBManagerService } from '../dbmanager/dbmanager.service';
import { ToastController } from '@ionic/angular';
@Component({
  selector: 'app-accountgrid',
  templateUrl: './accountgrid.page.html',
  styleUrls: ['./accountgrid.page.scss'],
})
export class AccountgridPage implements OnInit {

  //#region 定义全局变量
  public rowCount: any[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];
  public colCount: any[] = ['使用日期', '金额', '使用说明', '支付类型', '使用类型', '姓名', '收支类型', '记账日期'];
  private SELECT_CONDITIONS: any; // 查询条件
  public QueryData: any[] = []; // 查询结果
  public UseTypes: any[] = [];// 使用类型
  public PaymentWay: any[] = []; // 付款方式
  public PaymentType: any[] = []; // 收支类型

  public itemCount: number=1;

  private win: any = window;
  private elBackTop = null; // 返回顶部按钮
  private elContent = null; // 内容标签
  private firstRow = null; // Grid第一行对象

  private CONTENT_TOP=null;//内容上部分
  private CONTENT_BOTTOM=null;//内容下部分
  /**
  * 查询条件信息
  */
  public conditionsInfo = {
    START_TIME: new Date().toDateString(),
    END_TIME: new Date().toDateString(),
    PaymentType: ''
  };
  //#endregion

  constructor(
    public tabsPage: TabsPage,
    public globalVariable: GlobalVariable,
    public dbManagerService: DBManagerService,
    public toastController: ToastController,
    public renderer2: Renderer2,
    public elementRef: ElementRef,
  ) {
    tabsPage.tabTitle = '记账明细'; // 在页面首次加载时默认传值给TabsPage的tabTitle变量用于改变标题栏
    this.UseTypes = this.globalVariable.UseTypes; // 使用类型
    this.PaymentWay = this.globalVariable.PaymentWay;
    this.PaymentType = this.globalVariable.PaymentType;
    
  }
  ngAfterViewChecked(): void {
    //Called after every check of the component's view. Applies to components only.
    //Add 'implements AfterViewChecked' to the class.
    this.tabsPage.currentPageInfo = this.globalVariable.pageInfo[0].AccountGrid;
    this.tabsPage.SON_TABNAME_NOW = 'AccountGrid';
  }
  //当页面完全进入并且现在是活动页面时运行。无论是第一次加载还是缓存页面，此事件都会触发。
   ionViewDidEnter(){
     this.CONTENT_TOP = this.elementRef.nativeElement.querySelector('#CONTENT_TOP');
        //  console.log("当前CONTENT_TOPDIV标签对象offsetHeight:",this.CONTENT_TOP.offsetHeight);
    this.CONTENT_BOTTOM = this.elementRef.nativeElement.querySelector('#CONTENT_BOTTOM');
    // console.log("当前CONTENT_BOTTOM_DIV标签对象:",this.CONTENT_BOTTOM);
    let height = this.elementRef.nativeElement.clientHeight -this.CONTENT_TOP.offsetHeight + 'px';
    // console.log('最终高度height:',height);
    this.renderer2.setStyle(this.CONTENT_BOTTOM,'height',height);
  }
  
  ngOnInit() {
    this.elBackTop = this.elementRef.nativeElement.querySelector('#BackTop');
    this.elContent = this.elementRef.nativeElement.querySelector('#Content');
    this.firstRow = this.elementRef.nativeElement.querySelector('#firstRow');
    
    // console.log("当前elementRef对象:",this.elementRef);
    // console.log("当前elContent标签对象:",this.elContent);
  }

  // 查询数据
  selectData(data: any) {
    try {

      if (data !== undefined) {
        this.SELECT_CONDITIONS = data;
        const START_TIME = new Date(data.START_TIME);
        const END_TIME = new Date(data.END_TIME);
        // console.log('日期:',ACCOUNT_DATE);
        data.START_TIME = START_TIME.toLocaleDateString();
        data.END_TIME = END_TIME.toLocaleDateString();
        // console.log('传入参数data:', data);
        // data.ACCOUNT_DATE = data.ACCOUNT_DATE.replace('-','');
        // this.globalVariable.sqlParamInfo = []; // 重置
        // // console.log('当前表单提交数据:', data);
        // // console.log('sql语句拼接参数信息:', this.globalVariable.sqlParamInfo);
        // this.globalVariable.sqlParamInfo.push(
        //   { colName: 'ACCOUNT_DATE', colValue: data.ACCOUNT_DATE },
        //   { colName: 'PAYMENT_WAY', colValue: data.PaymentWay }
        // );
        // console.log('sql语句拼接参数信息:', this.globalVariable.sqlParamInfo);
        const sql = " SELECT * FROM (" +
          " SELECT ACCOUNT_DATE,MONEY_USE_TIME," +
          "AMOUNT,PAYMENT_TYPE,PAYMENT_WAY," +
          "MONEY_UST_TYPE,MONEY_USE_DESC, '' NAME  FROM money_useinfo  WHERE 1=1   " +
          " UNION ALL  " +
          " SELECT ACCOUNT_DATE,MONEY_USE_TIME," +
          " AMOUNT,PAYMENT_TYPE,PAYMENT_WAY, " +
          " MONEY_UST_TYPE,MONEY_USE_DESC,NAME " +
          " FROM renqing  WHERE 1=1  )";
        let sql_where = " WHERE 1=1 AND ACCOUNT_DATE>='" + data.START_TIME + "'" +
          " AND ACCOUNT_DATE<='" + data.END_TIME + "'";
        if (data.PaymentType !== "") {
          sql_where += " AND PAYMENT_TYPE='" + data.PaymentType + "'";
        }
        const sql2 = " UNION ALL" +
          " SELECT" +
          "   '' ACCOUNT_DATE," +
          "   '合计:'		MONEY_USE_TIME," +
          "   SUM(AMOUNT) AMOUNT," +
          "   ''		PAYMENT_TYPE," +
          "   ''		PAYMENT_WAY," +
          "   ''		MONEY_UST_TYPE," +
          "   ''		MONEY_USE_DESC," +
          "   '' NAME" +
          " FROM" +
          "   (" +
          "     SELECT" +
          "        ACCOUNT_DATE," +
          "       MONEY_USE_TIME," +
          "       AMOUNT," +
          "       PAYMENT_TYPE," +
          "       PAYMENT_WAY," +
          "       MONEY_UST_TYPE," +
          "        MONEY_USE_DESC," +
          "        '' NAME" +
          "      FROM" +
          "        money_useinfo" +
          "      WHERE" +
          "       1 = 1" +
          "     UNION ALL" +
          "      SELECT" +
          "        ACCOUNT_DATE," +
          "        MONEY_USE_TIME," +
          "         AMOUNT," +
          "         PAYMENT_TYPE," +
          "         PAYMENT_WAY, " +
          "         MONEY_UST_TYPE, " +
          "           MONEY_USE_DESC, " +
          "        NAME " +
          "       FROM " +
          "         renqing " +
          "       WHERE " +
          "         1 = 1 " +
          "   ) ";
        const sql_order = " ORDER BY MONEY_USE_TIME DESC ";
        // 调用查询方法
        this.dbManagerService.SelectDataBySQL(sql+sql_where +sql2+ sql_where + sql_order)
          .then((success) => {
            if (this.win.sqlitePlugin) {
              this.QueryData = [];
              for (let index = 0; index < success.res.rows.length; index++) {
                for (const UseTypes of this.UseTypes) {
                  if (success.res.rows.item(index).MONEY_UST_TYPE === UseTypes.value) {
                    success.res.rows.item(index).UseTypesDesc = UseTypes.description; // 添加使用类型中文描述
                    // console.log('row:', row);
                  }
                }
                for (const PaymentWay of this.PaymentWay) {
                  if (success.res.rows.item(index).PAYMENT_WAY === PaymentWay.value) {
                    success.res.rows.item(index).PaymentWayDesc = PaymentWay.description; // 添加支付方式中文描述
                  }
                }
                for (const PaymentType of this.PaymentType) {
                  if (success.res.rows.item(index).PAYMENT_TYPE === PaymentType.value) {
                    success.res.rows.item(index).PaymentTypeDesc = PaymentType.description; // 添加收支类型中文描述
                  }
                }
                this.QueryData.push(success.res.rows.item(index));
              }
            } else {
              this.QueryData = [];
              for (const row of success.res.rows) {
                for (const UseTypes of this.UseTypes) {
                  if (row.MONEY_UST_TYPE === UseTypes.value) {
                    row.UseTypesDesc = UseTypes.description; // 添加使用类型中文描述
                  }
                }
                for (const PaymentWay of this.PaymentWay) {
                  if (row.PAYMENT_WAY === PaymentWay.value) {
                    row.PaymentWayDesc = PaymentWay.description; // 添加支付方式中文描述
                  }
                }
                for (const PaymentType of this.PaymentType) {
                  if (row.PAYMENT_TYPE === PaymentType.value) {
                    row.PaymentTypeDesc = PaymentType.description; // 添加收支类型中文描述
                  }
                }
                this.QueryData.push(row); // 将结果中的数据赋值给QueryData对象,在前端可以直接使用ngfor访问QueryData

              }
            }
          }, (error) => {
            console.log(error);
            const toast = this.toastController.create({
              message: error,
              duration: 3000, // 3秒后自动消失
              position: 'top', // 位置
              showCloseButton: true,
              closeButtonText: '关闭'
            });
            toast.then((ok) => {
              ok.present(); //  符合触发条件后立即执行显示
            });
          });
      }
    } catch (error) {
      console.log('错误信息:', error);
    }
  }

  //#region  返回顶部功能
  // 返回顶部按钮
  backContentTop() {
    this.renderer2.setAttribute(this.elBackTop, 'hidden', 'true');
    this.elContent.scrollToTop(0); // 返回内容页顶部
  }
  ionScroll() {
    // getScrollElement():获取实际滚动发生的元素
    const scrollElement: Promise<HTMLElement> = this.elContent.getScrollElement();
    scrollElement.then((Element) => {
      // console.log("当前滚动距离:",Element.scrollTop );
      if (Element.scrollTop > 110) { // 设置当滚动条距离顶部的距离为110时返回顶部按钮显示
        this.renderer2.removeAttribute(this.elBackTop, 'hidden');
        this.renderer2.addClass(this.firstRow, 'firstRow_scroll_Top');
      } else if (Element.scrollTop === 0) { // 设置当滚动条距离顶部的距离为0时返回顶部按钮隐藏
        this.renderer2.setAttribute(this.elBackTop, 'hidden', 'true');
      } else if (Element.scrollTop < 110) {
        this.renderer2.removeClass(this.firstRow, 'firstRow_scroll_Top');
      }
    });
  }
  //#endregion
}

3.accountgrid.page.scss

// 圆角及背景颜色公用
.el_border_radiusAndbackcolor{
    border:1px solid gainsboro;
    border-radius: 5px;
    background-color: rgb(243, 242, 239);
    padding: 4%;
    height: 35px;
}
// ion-col标签自定义样式
.ion_col_self_css {
    align-self: center;
    text-align: right;
}
//奇数行样式
.grid_col_rgb_j{
    background-color: rgb(211, 242, 247);
    border: 1px solid rgb(167, 165, 165);
}
//偶数行样式
.grid_col_rgb_o{
    background-color: rgb(233, 230, 230);
    border: 1px solid rgb(167, 165, 165);
}
.grid_col_rgb_header{
    background-color: #1196EE;
    border: 1px solid rgb(165, 166, 167);
    text-align: center;
    color: white;
}
.grid_col_white{
    background-color: white;
    border: 1px solid rgb(167, 165, 165);
}

//Gird首行样式
.firstRow_scroll_Default{
    z-index: 999;//标签在最顶层
    width: 150%;
}
.firstRow_scroll_Top{
    position: fixed;//固定
    z-index: 999;//标签在最顶层
}

4.效果图 

JustWantToFly
关注
专栏目录
React Native学习资源汇总
xiangzhihong8的专栏
08-01 2348
目前主流的移动跨平台技术方案大体可以分为三类，一类是使用原生内置浏览器加载HTML5的Hybrid技术方案，采用此种方案的主要有Cordova、Ionic和微信小程序；另一类是使用JavaScript语言进行开发，然后使用原生组件进行渲染，采用此方案的主要有React Native、Weex和快应用；最后一类是使用自带的渲染引擎和自带的原生组件来实现跨平台，采用此种方案的主要是Flutter。 对于其他的浏览器方案，基本可以抛弃了，现在我们讨论移动跨平台开发主要说的是React Native和Flutter
Awesome Mac :好用的Mac软件和教程
07-09 5982
文章目录Awesome Mac目录开发者工具编辑器开发者实用工具正则编辑器API开发和分析网络分析命令行工具版本控制GUI版本控制系统数据库设计和产品设计工具原型流程作图工具截图工具其它工具虚拟机通信Email文件共享数据恢复音频和视频云音乐播放器书签阅读写作OfficeRSSMarkdown笔记制作电子书软件打包工具下载工具网盘输入法浏览器翻译工具安全工具科学上网其它实用工具剪贴板工具菜单栏工具...
ionic2中使用echarts3创建图表
11-10
ionic2中使用echarts的完整实例代码
ionic：在Ionic项目中使用ngx-datatable创建表格展示数据
灿灿大王搭建的黄金屋
01-11 3548
想要在ionic中使用ngx-datatable插件展示表格，首先需要安装插件：npm install @swimlane/ngx-datatable 然后将这个插件的依赖导入到要使用这个插件所在的页面的module中： import{NgxDatatableModule}from'@swimlane/ngx-datatable' 接下来，在页面上取到后台传给我们的表格的数据，比如我这...
ionic 表格
樊建华
05-17 1517
一， npm install @swimlane/ngx-datatable 二， app.module.ts import { NgxDatatableModule } from '@swimlane/ngx-datatable'; imports: [ … NgxDatatableModule, ], app.component.html <div>...
ionic组件-form表单
qq_41768447的博客
03-16 1216
本节知识点：Ionic之form表单实现MVVM，模拟数据提交或信息注册案例。 效果展示： 【ion-input】单行文本框 <ion-item-divider> <ion-label>用户基本信息</ion-label> </ion-item-divider> <ion-item> <ion...
ionic之创建列表
牛栏山矿泉水
10-12 126
1、实例背景 ionic创建动态列表，根据AngularJS赋值 2、实现源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="initial-scale=1.0, maximum-scale=1.
HTML5Lib在移动应用开发中的应用：构建响应式Web应用的关键
[HTML5Lib在移动应用开发中的应用：构建响应式Web应用的关键](https://opengraph.githubassets.com/37b2f8db1ac61800a93f2b687f373774db14a980a65d6f198323770f8f760e51/github/lit-html) # 1. HTML5Lib概述 ## 1.1...
前端笔记
08-22
了解Hybrid开发（如Cordova、Ionic）、Progressive Web App (PWA) 和跨平台框架（React Native、Flutter），以及移动设备特有的API和适配策略。 八、Web性能优化 包含减少HTTP请求、压缩资源、使用CDN、懒加载、预...
使用 Jenkins X、Kubernetes 和 Spring Boot 实现 CI/CD
Jenkins中文社区
05-29 656
本文首发自 Jenkins 中文社区 过去五年中的变化，如迁移到公有云以及从虚拟机向容器的转变，已经彻底改变了构建和部署软件的意义。 以 Kubernetes 为例。Google 于2014年开源，现在所有主流的公有云供应商都支持它—它为开发人员提供了一种很好的方式，可以将应用程序打包到 Docker 容器中，并部署到任意 Kubernetes 集群中。 使用 CI/CD、Kubernetes 和...
ionic 导出excel实现方案
05-18
轻松完美的实现ionic导出excel表格，真实项目代码案例，代码简洁，轻松完美的实现ionic导出excel表格，真实项目代码案例轻松完美的实现ionic导出excel表格，真实项目代码案例
ionic入门教程第十三课-多级分类列表的简单实现-附件资源
03-05
ionic入门教程第十三课-多级分类列表的简单实现-附件资源
ionic1 滑动表格
菠菜盼娣
03-29 366
1 相关html <div> <div class="biaotou" style="display: flex"> <div class="heads"> <span>姓名</span> </div> <div cl...
ionic4--数据显示
萍踪侠影
04-14 537
今天小编带领大家做一次数据显示，今天以循环显示数据库和显示变量数据，主要针对于新手练习操作哦。 循环显示： let可以变 const不可以变的数据
html_ionic 表头 表底 下拉
暴风雨的博客
01-11 414
charset="UTF-8">     name="viewport" content="width=device-width" />   href="lib/css/ionic.css" rel="stylesheet" />   src="lib/js/ionic.bundle.js">     a
ionic实现表格头部和第一列固定且都可滚动
热门推荐
lishihong
09-30 1万+
由于移动端屏幕有限，在展示多行多列的表格类型数据时，需要做成可滚动的来展示，但是滚动的时候，我们需要表头和第一列固定，以便在滚动的时候，可以看到该行、该列所属。
ionic5 表单相关组件（单行文本框、开关、多选按钮、下拉框、多行文本框）
u010574271的博客
04-09 1254
这里写目录标题准备新建页面跳转创建表单信息的JSON字符串页面创建list页面展示peopleInfo单行文本框ion-input开关ion-toggle单选按钮组 ion-radio-group 、ion-radio多选按钮ion-checkbox下拉框ion-select、ion-select-option多行文本框 ion-textarea 准备 新建页面 首先，我们项目中新建页面form如下： 跳转 接下来我们在tab1中新建按钮跳转只form页面 <ion-button [routerLi
Ionic实战二十一：树的集成及列表数据关联
博主逸尘
08-05 431
文章目录1. 项目UI部分页面2.实际效果预览3.引入ztree4.页面布局5.页面引入6.页面树样式修改7.html页面中引入css及js文件 最近不太顺，投标了2个大项目都黄了，记录下其中一个之前没做过的内容点。 1. 项目UI部分页面 2.实际效果预览 由于项目黄了，仅做2页面当技术储备 3.引入ztree npm install @ztree/ztree_v3 4.页面布局 <ion-row> <ion-col col-4> <
Ionic 组件使用方法
小亮同学
10-18 1828
Ionic 组件1. 布局 12 栅格 <ion-grid> <ion-row> <ion-col col-6>苏州</ion-col> <ion-col col-6 style="text-align: right" >...</ion-col> </ion-row> </ion-grid> tabs默认情况下，导航到“选项卡”页面将选择第一个选项卡。可以通过改变所
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值