ionic4 ion-picker用法
ion-picker实际开发中肯定多处使用,所以封装成服务的形式调用
新建picker.service服务模块 ionic g service picker
import { Injectable, Component, OnInit } from '@angular/core';
import { PickerController } from '@ionic/angular'; @Injectable({
providedIn: 'root'
})
export class PickerService {
constructor(public pickercontroller: PickerController) {}
async openPicker(numColumns = 1, numOptions = 5, multiColumnOptions,callback) {
const picker = await this.pickercontroller.create({
columns: this.getColumns(numColumns, numOptions, multiColumnOptions),
buttons: [
{
text: '取消',
role: 'cancel'
},
{
text: '確定',
handler: value => {
// console.log(`Got Value ${value}`);
callback(JSON.stringify(value))
}
}
]
});
await picker.present();
}
getColumns(numColumns, numOptions, columnOptions) {
let columns = [];
for (let i = 0; i < numColumns; i++) {
columns.push({
name: `col-${i}`,
options: this.getColumnOptions(i, numOptions, columnOptions)
});
}
return columns;
}
getColumnOptions(columnIndex, numOptions, columnOptions) {
let options = [];
for (let i = 0; i < numOptions; i++) {
options.push({
text: columnOptions[columnIndex][i % numOptions],
value: i
});
}
return options;
}
}
在组件中使用:
html中:
ts中:
import { Component, OnInit } from '@angular/core';
import { PickerController } from '@ionic/angular';
import { PickerService } from '../picker/picker.service'; @Component({
selector: 'app-head1',
templateUrl: './head1.page.html',
styleUrls: ['./head1.page.scss']
})
export class Head1Page implements OnInit {
Options: any = {
header: '開放身份',
subHeader: 'Select your favorite color'
};
public roleOptions = [['全部', '老師', '學生', '家長']];
public roleText = '開放身份'; //选择的角色
public subjectOptions = [['全部學科', '體育', '科學', '語文', '數學', '英語', '音樂', '美術', '品德與生活', '信息技術', '計算機']];
public subjectText = '全部學科'; //选择的学科
constructor(public pickercontroller: PickerController, public pickerService: PickerService) {} ngOnInit() {}
pickerFn($start, $length, $option, type) {
let that = this;
this.pickerService.openPicker($start, $length, $option, function(result) {
let vals = JSON.parse(result)['col-0'].text;
switch (type) {
case 'role':
that.roleText = vals;
break;
case 'subject':
that.subjectText = vals;
break;
default:
break;
}
});
}
}
ionic4 ion-picker用法的更多相关文章
- ionic4 ion-modal的用法
组件内部示例 <ion-header> <ion-toolbar> <ion-title>条件筛选</ion-title> <ion-button ...
- 小程序组件之picker和range-key的用法
因为在微信小程序的官网上并没有range-key的例子以及实际用法,所以好多人不知道具体如何使用.然后我在这里对其进行一个简单的实现,并记录一些注意事项. 以下是官网给的说明: 具体的用法 ...
- 微信小程序开发之picker选择器组件用法
picker组件时一个从底部弹起的可滚动的选择器(嵌入页面滚动器组件picker-view查看https://mp.weixin.qq.com/debug/wxadoc/dev/component/p ...
- 数值选择器(NumberPicker)的功能与用法
数值选择器用于让用户输入数值,用户既可以通过键盘输入数值,也可以通过拖动来选择数值.使用该组件常用如下三个方法. setMinValue(int minVal):设置该组件支持的最小值. setMax ...
- mpvue微信小程序多列选择器用法:实现省份城市选择
前言 微信小程序默认给我们提供了一个省市区的picker选择器,只需将mode设置为region即可 <picker mode="region" bindchange=&qu ...
- ruby where用法
用法1 Subject.where(").order("name") 用法2 与find方法不同的是,where方法返回的结果不是数组而是ActiveRelation,这 ...
- richface的配置、用法介绍和注意事项
richface的配置.用法介绍和注意事项一.RichFaces (3.1.x) 技术需求 1.JDK 1.5 或更高版本: 2.支持的 JSF 实现: Sun JSF 1.1 RI - 1.2 My ...
- 页面滚动插件 better-scroll 的用法
better-scroll 是一个页面滚动插件,用它可以很方便的实现下拉刷新,锚点滚动等功能. 实现原理:父容器固定高度,并设置 overflow:hidden,子元素超出父元素高度后将被隐藏,超出部 ...
- Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色
1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...
随机推荐
- 房屋布局分析《Physics Inspired Optimization on Semantic Transfer Features: An Alternative Method for Room Layout Estimation》
视觉算法在智能审核系统上的演进与实践 刘天悦 贝壳找房 / 资深工程师 https://static001.geekbang.org/con/56/pdf/1088777747/file/%E8%A7 ...
- jq Sortable的使用
本文仅做翻译记录查看,GitHub原项目地址: https://github.com/RubaXa/Sortable/ ,建议将Sortable.js下载到本地,GitHub上的例子在复制到本地运行, ...
- 如何将Excel表批量赋值到ArcGIS属性表
情景再现 现需要将Excel表信息批量赋值(不是挂接)到Shp文件的属性表,两张表的字段.记录数一模一样,至于为什么会出现这样的问题,咱也不敢问,只有想个法子把它搞定! 原始的Excel信息表共57列 ...
- Codeforces Round #599 (Div. 2) A. Maximum Square 水题
A. Maximum Square Ujan decided to make a new wooden roof for the house. He has
- Linux 命名管道
前文中笔者介绍了管道,本文接着介绍命名管道.文中演示所用环境为 Ubuntu 18.04 desktop. 命名管道(named pipe)又被称为先进先出队列(FIFO),是一种特殊的管道,存在于文 ...
- React: React的复合组件
一.介绍 不论Web界面是多么的复杂,它都是由一个个简单的组件组合起来实现的,既然会创建一个简单的组件,那么复杂的组件就有了下手的切入点了.现在来实现一个简单的复合组件.一个颜色面板,一共三部分组成. ...
- python面试题及答案 2019
利用切片操作,实现一个trim()函数,去除字符串首尾的空格,注意不要调用str的strip()方法. 正解1: def trim(s): while s[:1] == ' ': s = s[1:] ...
- Saiku使用iframe嵌入页面访问地址配置化(二十八)--DWR的基本使用
Saiku使用iframe嵌入页面使用时ip与端口配置化(二十八)--DWR的基本使用 DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开 ...
- java高并发系列 - 第5天:深入理解进程和线程
进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.程序是指令.数据及其组织形式的描述,进程是程序的实体. 进程具有的 ...
- Shell(2)—数组
Shell(2)-数组 常用的 Bash Shell 只支持一维数组,不支持多维数组. 一.概念 Shell 并且没有限制数组的大小,理论上可以存放无限量的数据.Shell 数组元素的下标也是从 0 ...