Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

时间:2021-07-10 00:48:02

Slides 轮播图组件
Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中


Swiper Api:http://idangero.us/swiper/api/

<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
</ion-buttons>
<ion-title>slides</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-slides pager="true" [options]="slideOpts" #slide1 (ionSlideTouchEnd)="slideDidChange()">
<ion-slide>
<img src="/assets/slide01.png" alt="">
</ion-slide>
<ion-slide>
<img src="/assets/slide02.png" alt="">
</ion-slide>
</ion-slides>
<br>
<ion-slides pager="true" #slide2>
<ion-slide>
<img src="/assets/slide02.png" alt="">
</ion-slide>
<ion-slide>
<img src="/assets/slide01.png" alt="">
</ion-slide>
<ion-slide>
<img src="/assets/02.png" alt="">
</ion-slide>
<ion-slide>
<img src="/assets/02.png" alt="">
</ion-slide>
</ion-slides>
<ion-button (click)="slideNext()">
点击按钮跳转到下一页
</ion-button>
<ion-button (click)="slidePrev()">
点击按钮跳转到上一页
</ion-button>
</ion-content>

Searchbar 组件

<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header> <ion-content padding>
<ion-searchbar placeholder="Filter Schedules"></ion-searchbar>
<ion-searchbar placeholder="请输入搜索的内容" animated></ion-searchbar>
<ion-searchbar placeholder="请输入搜索的内容" animated type="number"></ion-searchbar>
<ion-searchbar placeholder="请输入搜索的内容" animated color="success"></ion-searchbar>
<ion-searchbar placeholder="文本框改变" debounce="500" (ionChange)="doChange()"></ion-searchbar>
</ion-content>
<ion-header>
<ion-toolbar> <ion-buttons slot="start">
<ion-back-button defaultHref="/tabs/tab1" text="返回"></ion-back-button>
</ion-buttons>
<ion-title>segment</ion-title>
</ion-toolbar>
</ion-header> <ion-content padding> <ion-segment [(ngModel)]="tab">
<ion-segment-button value="tab1">
<ion-label>简介</ion-label>
</ion-segment-button>
<ion-segment-button value="tab2">
<ion-label>详情</ion-label>
</ion-segment-button>
<ion-segment-button value="tab3">
<ion-label>评论</ion-label>
</ion-segment-button>
</ion-segment> <div class="info" [ngSwitch]="tab"> <div *ngSwitchCase="'tab1'">
商品简介 --注意ngSwitchCase写法
</div> <div *ngSwitchCase="'tab2'">
商品详情 </div>
<div *ngSwitchCase="'tab3'">
商品评论
</div>
</div>
</ion-content>

Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件的更多相关文章

  1. 告别组件之教你使用原生js和css写移动端轮播图

    在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...

  2. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

  3. React Native 之轮播图swiper组件

    注释:swiper组件是第三方组件 所以在使用之前应该先在命令行安装,然后将第三方的模块引入(第三方模块地址:https://github.com/leecade/react-native-swipe ...

  4. 在Nuxt中使用react-id-swiper封装公共的轮播图组件(移动端

    首先就是引入swiper import Swiper from 'react-id-swiper': 一个轮播图首先要考虑到一种情况就是当只有一张图的时候是不是需要按轮播图来处理 一般情况下,一张图是 ...

  5. 前端笔记之JavaScript面向对象(四)组件化开发&amp&semi;轮播图&vert;俄罗斯方块实战

    一.组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. ...

  6. nativescript——轮播图组件

    import { Directive, ElementRef, AfterViewInit, Input, OnDestroy } from "@angular/core"; im ...

  7. vue移动音乐app开发学习(三):轮播图组件的开发

    本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...

  8. vue-cli中轮播图vue-awesome-swiper使用方法

    1 npm 安装 npm install vue-awesome-swiper --save 2在所用的组件中引入 import 'swiper/dist/css/swiper.css' import ...

  9. Vue实现音乐播放器(七):轮播图组件(二)

    轮播图组件 <template> <div class="slider" ref="slider"> <div class=&qu ...

随机推荐

  1. myeclipse ctrl&plus;shift&plus;F失效

    因为在使用搜狗输入法,切换到英文状态,输入ctrl+shift+F,格式化完之后,然后再换回来

  2. (4)ARP:地址解析协议

    一.简介 ARP为IP地址到对应的硬件地址之间提供动态映射.之所以称为动态是因为这个过程是自动完成的.一般应用程序用户或系统管理员不必关心.RARP是被那些没有磁盘驱动器的系统使用,它需要系统管理员进 ...

  3. 详解intellij idea搭建SSM框架&lpar;spring&plus;maven&plus;mybatis&plus;mysql&plus;junit&rpar;&lpar;上&rpar;

    SSM(Spring+SpringMVC+MyBatis)框架集由Spring.SpringMVC.MyBatis三个开源框架整合而成,常作为数据源较简单的web项目的框架. 其中spring是一个轻 ...

  4. &lbrack;POJ2054&rsqb;Color a Tree &lpar;并查集&plus;贪心&rpar;

    POJ终于修好啦 题意 和UVA1205是同一题,在洛谷上是紫题 有一棵树,需要给其所有节点染色,每个点染色所需的时间是一样的都是11.给每个点染色,还有一个开销“当前时间×ci×ci”,cici是每 ...

  5. Linux 命令 及 简单操作 学习

    众所周知,linux命令很多很多,但是,请不用担心,相信你自己不断的积累,终有一天你和你和小伙伴都会为你惊呆的...... 废话不多说,那,什么时候动手????---------现在,马上..... ...

  6. 盘点&colon;七大&period;NET著名开源项目

    尽管过了相当长的时间,花费了不少资源,微软和.NET社区还是在最近几年加入到了开源运动的阵营中来了,这令人相当惊讶,因为两大阵营一直都是经常对立的.然而,事实是依靠开源,微软社区中的开源开发工具日益发 ...

  7. MongoDB 学习(二)可视化界面

    一.安装可视化界面 1.mongobooster 安装和配置 1.下载安装 下载地址:https://nosqlbooster.com/downloads 下载完成后直接点击安装: 安装完成弹出界面: ...

  8. bootstrap-table页码ALL显示为NAN

    在github上查阅找到的解决办法: https://github.com/wenzhixin/bootstrap-table/issues/435 页面部分: data-page-list=&quo ...

  9. PAT 甲级 1101 Quick Sort

    https://pintia.cn/problem-sets/994805342720868352/problems/994805366343188480 There is a classical p ...

  10. 【转】IDEA快捷键功能说明及Eclipse对应操作

    1.Ctrl+z是撤销快捷键 2.如果想恢复Ctrl+z 掉的内容,按快捷键为:Ctrl + Shift + Z.方可 3.Ctrl-H(Browse Type Hierarchy) Ctrl + A ...