ionic中的常用组件(2)

其他 2020-04-08 11:26:17 阅读次数: 0

9,list
用来显示信息列表，如联系人列表、播放列表或菜单。

<!-- 普通list -->
  <ion-list >
    <ion-item>item1</ion-item>
    <ion-item>item2</ion-item>
    <ion-item>item3</ion-item>
  </ion-list>

demo :
在这里插入图片描述

<!-- 分组list -->
  <ion-list >
    <ion-item-group>
        <ion-item-divider style="font-size:12px" >江苏</ion-item-divider>
        <ion-item >南京</ion-item>
        <ion-item >无锡</ion-item>
        <ion-item >苏州</ion-item>
        <ion-item-divider style="font-size:12px" >上海</ion-item-divider>
        <ion-item >浦东区</ion-item>
        <ion-item >虹口区</ion-item>
        <ion-item >徐汇区</ion-item>
    </ion-item-group>
  </ion-list>

在这里插入图片描述

<!-- 图标list -->
  <ion-list>
    <ion-item>
      <ion-icon slot="start" name="home"></ion-icon>
      首页
      <ion-note item-end>更多</ion-note>
    </ion-item>
    <ion-item>
      <ion-icon slot="start" name="mail"></ion-icon>
      邮件
      <ion-note item-end>查看</ion-note>
    </ion-item>
  </ion-list>

demo
在这里插入图片描述

<!-- 带img的list -->
  <ion-list>
      <ion-item>
        <ion-avatar item-start>
          <img src="../../assets/image/1.png"/>
        </ion-avatar>
        <h3>小张</h3>
        <p>你打球像cxk</p>
      </ion-item>
      <ion-item>
        <ion-avatar item-start>
          <img src="../../assets/image/2.png"/>
        </ion-avatar>
        <h3>小三</h3>
        <p>你打球像cxk</p> 
      </ion-item>
      <ion-item>
        <ion-avatar item-start>
          <img src="../../assets/image/3.png"/>
        </ion-avatar>
        <h3>小王</h3>
        <p>你打球像cxk</p> 
      </ion-item>
    </ion-list>

在这里插入图片描述
ion-item-sliding滑块显示操作，ion-item-options side=“right” 控制方向

<ion-list>
      <ion-item-sliding>
        <ion-item>
          <ion-avatar item-start>
            <img src="../../assets/image/2.png">
          </ion-avatar>
          <h3>前端学习群</h3>
          <p style="font-size:12px">前端小白:有人在吗</p>
          <ion-badge style="font-size:12px" color="danger" item-right>99+</ion-badge>
        </ion-item>
        <ion-item-options side="right"> 
            <button ion-button color="danger"> 
                删除
            </button> 
        </ion-item-options> 
      </ion-item-sliding>
    </ion-list>

demo
在这里插入图片描述
Item Thumbnail显示了一个占据项高度的图片。在项内添加ion-thumbnail组件来使用。缩略图的位置通过item-left和item-right属性来设置：

<ion-list> 
        <ion-item> 
            <ion-thumbnail item-left> 
                <img src="../../assets/image/2.png"> 
            </ion-thumbnail> 
            <h3>布偶小鸡</h3> 
            <p>这是布偶小鸡的介绍</p> 
            <button clear item-right>详情</button> 
        </ion-item>
        <ion-item> 
            <ion-thumbnail item-left> 
                <img src="../../assets/image/2.png"> 
            </ion-thumbnail> 
            <h3>布偶小鸡</h3> 
            <p>这是布偶小鸡的介绍</p> 
            <button clear item-right>详情</button> 
        </ion-item>
        <ion-item> 
            <ion-thumbnail item-left> 
                <img src="../../assets/image/2.png"> 
            </ion-thumbnail> 
            <h3>布偶小鸡</h3> 
            <p>这是布偶小鸡的介绍</p> 
            <button clear item-right>详情</button> 
        </ion-item> 
    </ion-list>

在这里插入图片描述

11,slides
主要是来实现新手教程、轮播图。。
ion-slides
ion-slide
…

ion-slides所支持的属性：
effect:
slide, fade, cube, coverflow or flip.
Default: slide.
效果：
滑动、渐变、立方体、覆盖流或翻转。
默认值：幻灯片。
speed //切换速度
autoplay //设置自动轮播 true/false
direction：horizontal/vertical //方向：水平/垂直
loop=true //循环轮播
pager( 小圆点 )
paginationType:
bullets(小圆点),
fraction（*/3）,
progress(可视化的进度条)

<ion-content padding>
  <ion-slides pager autoplay=1000 loop=true speed=2000>//想要的效果可以加这个属性里面
    <ion-slide>
      <h1>第一页</h1>
    </ion-slide>
    <ion-slide>
      <h1>第二页</h1>
    </ion-slide>
    <ion-slide>
      <h1>第三页</h1>
    </ion-slide>
  </ion-slides>
</ion-content>

12,LoadingController

1、引入
import {LoadingController} from 'ionic-angular'
2、实例化
constructor(public myLoadCtrl:LoadingController){}
showLoading(){
    let myLoading = 
      this.myLoadCtrl.create(
        {
          content:'正在刷新数据',
          // duration:3000
        }
      );
    myLoading.present();

    // 4s延迟之后，手工关掉加载中的窗口
    setTimeout(
      ()=>{
        myLoading.dismiss();
      },
      4000
    )

  }

13,refresher上拉刷新，下拉加载更多

①指定一个对应的组件标签
	在ion-content的第一个子元素
	 <ion-refresher>
		<ion-refresher-content
		 refreshingSpinner="dots"
                 refreshingText="正在获取数据中"
		pullingIcon=""
		pullingText="">
		</ion-refresher-content>
	</ion-refresher>
	②指定下拉刷新要执行的操作
	<ion-refresher (ionRefresh)="doRefresh()">
	</ion-refresher>
	③结束掉刷新动作
		第一步：在触发ionRefresh事件的处理函数，指定$event作为参数
		doRefresh($event)
		第二步：调用complete方法
		doRefresh(refresher){
			refresher.complete();
		}

上拉加载更多

①调用
	在ionContent的最后一个子元素的位置调用
	  <ion-infinite-scroll>
	      <ion-infinite-scroll-content
	      loadingSpinner="dots"
	      loadingText="正在加载更多"
	      >

	      </ion-infinite-scroll-content>
  </ion-infinite-scroll>
	②绑定事件
	<ion-infinite-scroll
		(ionInfinite)="loadMore($event)"
	>
	</ion-infintie-scroll>

	③结束加载更多的刷新动作

	loadMore(infinite){
		infinite.complete();
	}

10,forms
input
Fixed Labels
使用fixed属性在Input元素左侧放一个Label。这个Label在输入文本的时候不会消失。Input会对齐到相同的位置，不管Label是什么长度。占位文本也可以和Fixed Label一起使用。

<ion-list>
        <ion-item>
            <ion-label fixed>用户名</ion-label>
            <ion-input type="text" value=""></ion-input>
        </ion-item>
        <ion-item>
            <ion-label fixed>密码</ion-label>
            <ion-input type="password"></ion-input>
        </ion-item>
    </ion-list>

在这里插入图片描述
Floating Labels
Floating Labels当选择输入的时候会浮动到上方。给ion-lable添加floating属性来使用。

<ion-list> 
        <ion-item> 
            <ion-label floating>用户名</ion-label> 
            <ion-input type="text"></ion-input> 
        </ion-item> 
        <ion-item> 
            <ion-label floating>密码</ion-label> 
            <ion-input type="password"></ion-input> 
        </ion-item> 
    </ion-list>

在这里插入图片描述
Inline Labels
没有任何属性的ion-label是一个Inline Label，输入的时候不会消失。可以与占位文本一起使用。

<ion-list> 
        <ion-item> 
            <ion-label>用户名</ion-label> 
            <ion-input type="text"></ion-input> 
        </ion-item> 
        <ion-item> 
            <ion-label>密码</ion-label> 
            <ion-input type="password"></ion-input> 
        </ion-item> 
    </ion-list>

会受到长度影响
在这里插入图片描述
Placeholder Labels
为input元素添加placeholder属性，当输入文本的时候，占位文本会消失。

<ion-list> 
      <ion-item> 
          <ion-input type="text" placeholder="用户名"></ion-input> 
      </ion-item> 
      <ion-item> 
      <ion-input type="password" placeholder="密码"></ion-input> 
      </ion-item> 
  </ion-list>

在这里插入图片描述

开关组
<ion-list>
    <ion-item>
      <ion-label>开关</ion-label>
      <ion-toggle checked="true"></ion-toggle>
    </ion-item>
  </ion-list>
   复选框
  <ion-list>
    <ion-item>
      <ion-label>您同意以下条款内容吗</ion-label>
      <ion-checkbox checked="false" ></ion-checkbox>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-item>
      <ion-label>你所掌握的知识内容</ion-label>
    </ion-item>
    <ion-item>
      <ion-label>Angular</ion-label>
      <ion-checkbox checked="false" ></ion-checkbox>
    </ion-item>
    <ion-item>
      <ion-label>Vue</ion-label>
      <ion-checkbox checked="false" ></ion-checkbox>
    </ion-item>
    <ion-item>
      <ion-label>Jquery</ion-label>
      <ion-checkbox checked="false" ></ion-checkbox>
    </ion-item>
    <ion-item>
      <ion-label>Ionic</ion-label>
      <ion-checkbox checked="true" ></ion-checkbox>
    </ion-item>
  </ion-list>

	单选框
  <ion-list radio-group>
    <ion-list-header>
      请选择您的性别
    </ion-list-header>
    <ion-item>
      <ion-label>男</ion-label>
      <ion-radio checked="true" value="box"></ion-radio>
    </ion-item>
    <ion-item>
        <ion-label>女</ion-label>
        <ion-radio checked="false" value="girl"></ion-radio>
      </ion-item>
  </ion-list>
 下拉框
  <ion-item>
    <ion-label>您所在的城市</ion-label>
    <ion-select [(ngModel)]="city"> //city='sh';
      <ion-option value="bj" >北京</ion-option>
      <ion-option value="sh" >上海</ion-option>
      <ion-option value="js" >江苏</ion-option>
    </ion-select>
  </ion-item>

在这里插入图片描述
在这里插入图片描述
12，页面间跳转
普通跳转,引入-声明-跳转

import { Demo05Page} from '../demo05/demo05'
demo05=Demo05Page;

<button ion-button [(navPush)]="demo05">去demo05</button>

js中 引入-定义函数-绑定

import { Demo05Page} from '../demo05/demo05'
jump(){
    this.navCtrl.push(Demo05Page)
  }

<button ion-button (click)="jump()">去demo05</button>

js中传参

<button ion-button (click)="jumpName()">去demo10</button>

jumpName(){
    this.navCtrl.push(Demo10Page,{userName:this.uname})
  }

demo10中
uName:string=""
ionViewDidLoad() {
    console.log(this.navParams.data);
    this.uName=this.navParams.data.userName; //两种接收方式
    this.uName=this.navParams.get('userName');
  }

返回

<button (click)="backToPre()">返回上一级</button>

backToPre(){
    this.navCtrl.pop()
  }

<ion-tab tabIcon="home" tabsHideOnSubPages: 'true' tabTitle="首页" [root]="index" ></ion-tab>
tabsHideOnSubPages: 'true',        //隐藏全部子页面tabs
backButtonText: "返回"  /*修改返回按钮为返回（默认是）*/
前端小菜鸡儿
发布了56 篇原创文章 · 获赞 8 · 访问量 2万+
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_44361433/article/details/89421155
今日推荐
周排行
成为C++高手之宏与枚举
在CAD二次开发中使用进度条
Js插件ECharts，HighCharts学习网址整理
Celery提交任务出错(on windows.)
cephfs内核客户端性能追踪
thinkphp中PHPExcel用法
EntityFramework动态组合多排序字段
汇编语言（八）实验9 根据材料编程
安装ubuntu后必须做的事情（对我而言）
JS函数式编程
每日归档
更多
2024-10-22(0)
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022