1、效果演示

2、npm安装扩展包依赖  ion-multi-picker 组件

npm install ion-multi-picker --save

3、在app.module.ts中导入插件模块

 import { MultiPickerModule } from 'ion-multi-picker';
@NgModule({
declarations: [
.....
],
imports: [
IonicModule.forRoot(MyApp),
//Import MultiPickerModule 模块
MultiPickerModule
],
bootstrap: [IonicApp],
entryComponents: [
.....
],
providers: []
})
export class AppModule {}

4、具体实例使用如下:

(1)获取本地省市区json数据

  

 //定义省市区数据源变量
public cityList = {
area:[]
};
//userInfo即为最终选中的省市区数据
public userInfo = {
province:"",
city:"",
district:""
};
// 获取本地城市列表服务
getCityData() {
return Observable.create(observer => {
this.http.get("./assets/area-data.json").subscribe(res => {
this.cityList['area'] = res;
}, err => {
this.handleError(err);
})
});
}
//获取选定的省市区
public getCityArea(){
let cityArr = document.getElementById("cities").innerText;
cityArr = this.Validate.trimBlank(cityArr);
if(cityArr == '省-市-区(县)'){
this.Pop.toast("请选择所在地区");
return false;
}
this.cityArr = cityArr.split("-");
this.userInfo.province = this.cityArr[0];
this.userInfo.city = this.cityArr[1];
this.userInfo.district = this.cityArr[2];
return this.userInfo;
}

5、模板渲染

 <ion-item>
<ion-label>城市</ion-label>
<ion-multi-picker id="cities" item-content [cancelText]="'取消'" [doneText]="'完成'" [placeholder]="userInfo.province == undefined ? '省-市-区(县)' : (userInfo.province + '-'+ userInfo.city +'-'+ userInfo.district)" [separator]="'-'" [multiPickerColumns]="cityList['area']"></ion-multi-picker>
</ion-item>

注意:其中 

   [multiPickerColumns]属性用于渲染获取到的本地省市区数据源

  [placeholder]属性用于初始化(已选中或未选中的)当前地区
  [cancelText]属性为取消按钮
  [cancelText]属性为完成按钮
  

ionic3 多级联动城市选择插件 ion-multi-picker的更多相关文章

  1. 纯原生js移动端城市选择插件

    接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...

  2. 基于jquery的城市选择插件

    城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *aut ...

  3. 移动端城市选择JavaScript插件(基于WG的城市选择插件的修改版本)

    周末的时候趁着一次机会,拿WG(博客)开发的城市选择插件改了一个移动端可以直接用的城市选择插件. 原版插件是基于原声JavaScript写的,在此先感谢作者. 我做的只是依照肯德基注册会员的页面的交互 ...

  4. layui省市区三级联动城市选择

    基于layui框架制作精美的省市区下拉框三级联动菜单选择, 支持三级联动城市选择,点击提交获取选中值代码. 示例图如下: 资源链接: https://pan.baidu.com/s/1s6l8iDBE ...

  5. zepto.js移动端城市选择插件

    http://sc.chinaz.com/jiaoben/170327301850.htm

  6. jquery插件课程1 幻灯片、城市选择、日期时间选择、拖放、方向拖动插件

    jquery插件课程1  幻灯片.城市选择.日期时间选择.拖放.方向拖动插件 一.总结 一句话总结:都是jquery插件,都还比较小,参数(配置参数.数据)一般都是通过json传递. 1.插件配置数据 ...

  7. uniapp自定义picker城市多级联动组件

    uniapp自定义picker城市多级联动组件 支持多端--h5.app.微信小程序.支付宝小程序... 支持自定义配置picker插件级数 支持无限级 注意事项:插件传入数据格式为children树 ...

  8. 4个好用的JS联动选择插件

    jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的J ...

  9. jQuery插件——多级联动菜单

    jQuery插件——多级联动菜单 引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后 ...

随机推荐

  1. DataX简介

    DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL.Oracle.SqlServer.Postgre.HDFS.Hive.ADS.HBase.TableStore(O ...

  2. 致命错误: Call to undefined function %y-%M-%d()

    在TP5.0中套模板时出现的问题: 原有html模板代码: <input type="text" onfocus="WdatePicker({ maxDate:'# ...

  3. JS 富文本编码、解码

    第一种 escape()和unescape()方法 escape() 方法能够把 ASCII之外的所有字符转换为 %xx 或 %uxxxx(x表示十六进制的数字)的转义序列.从 \u000 到 \u0 ...

  4. webpack学习(一)起步安装

    起步   webpack 用于编译 JavaScript 模块.一旦完成安装,你就可以通过 webpack 的 CLI 或 API 与其配合交互.如果你还不熟悉 webpack,请阅读核心概念和打包器 ...

  5. 查看java进程内存简单示例

    分析工具 1.jps 显示指定系统内的所有JVM进程 2.jstat 收集JVM各方面的运行数据 3.jinfo  显示JVM配置信息 4.jmap  堆快照 5.jhat  分析headdump文件 ...

  6. eclipse里部署struts2

    Struts2是一个比较出色的基于MVC设计模式的框架,是由Struts1和WebWork发展而来的,性能也比较稳定,现在是Apache软件基金会的一个项目,下面就来配置Struts2进行初始化的开发 ...

  7. c++后台开发面试常见知识点总结(五)场景设计

    搜索引擎的实现,会用到哪些重要的数据结构 设计实现一个HTTP代理服务器 / web服务器 / FTP服务器/ 设计实现cache缓存web服务器的网页访问记录 把一个文件快速下发到100w个服务器 ...

  8. atomic 原子操作的类

    import java.util.concurrent.atomic.AtomicInteger; /** * 原子操作的类 atomic */ public class VolatileDemo { ...

  9. PyTorch 计算机视觉的迁移学习教程代码详解 (TRANSFER LEARNING FOR COMPUTER VISION TUTORIAL )

    PyTorch 原文: https://pytorch.org/tutorials/beginner/transfer_learning_tutorial.html 参考文章: https://www ...

  10. Java中Calendar类的常用方法(对时间进行计算的类)

    例子: /**** * 传入具体日期 ,返回具体日期增加一个月. * @param date 日期(2017-04-13) * @return 2017-05-13 * @throws ParseEx ...