ionic3使用ion-multi-picker插件实现省市区三级联动的城市选择
2019-04-11 16:49
627 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/An_zhou/article/details/89213406
首先安装ion-multi-picker插件
输入命令:npm install ion-multi-picker --save
在app.module.ts中引入插件
[code]import { MultiPickerModule } from 'ion-multi-picker'; @NgModule({ imports: [ ………… MultiPickerModule, ………… ], })
在某个页面使用时引入ion-multi-picker
[code]import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { EceiingPage } from './eceiing'; import {MultiPickerModule} from 'ion-multi-picker'; @NgModule({ declarations: [ EceiingPage, ], imports: [ MultiPickerModule, IonicPageModule.forChild(EceiingPage), ], }) export class EceiingPageModule {} //EceiingPage页面中引入插件
在eceiing.html页面中调用插件
[code]<ion-multi-picker item-content [multiPickerColumns]="dependentColumns" [cancelText]="'取消'" [doneText]="'完成'"></ion-multi-picker>
eceiing.ts中定义变量dependentColumns
[code]import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams,AlertController } from 'ionic-angular'; /** * Generated class for the EceiingPage page. * * See https://ionicframework.com/docs/components/#navigation for more info on * Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-eceiing', templateUrl: 'eceiing.html', }) export class EceiingPage { public dependentColumns:any; constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController, ){ this.dependentColumns=太长了,没有复制 ionViewDidEnter(){ } }
省市区json的下载地址:https://raw.githubusercontent.com/raychenfj/ion-multi-picker/master/example/src/assets/chinese-cities.json
这样就可以实现三级联动城市的选择了
相关文章推荐
- Android中使用开源框架Citypickerview实现省市区三级联动选择
- Android中使用开源框架Citypickerview实现省市区三级联动选择
- Android中使用开源框架citypickerview实现省市区三级联动选择
- Android中使用开源框架citypickerview实现省市区三级联动选择
- wheel自定义控件,实现城市三级联动,时间选择的功能简单使用
- layui自定义插件citySelect实现省市区三级联动选择
- 使用dropkick.js插件实现省市区三级联动效果
- Android使用开源框架Citypickerview实现省市区三级联动效果
- 高仿iOS 滚轮实现 省市区 城市选择三级联动
- Vue如何使用vue-area-linkage实现地址三级联动效果 很多时候我们需要使用地址三级联动,即省市区三级联动。网上有很多插件,在此介绍Vue的一款地区联动插件:vue-ar
- 安卓学习笔记---Android-PickerView实现 3D滚轮效果(时间选择器、省市区三级联动,单项选择效果)
- 高仿iOS 滚轮实现 省市区 城市选择三级联动,无需自己配置省市区域的数据
- wheel自定义控件,实现城市三级联动,时间选择的功能简单使用
- 使用Ajax+jQuery实现省市区三级联动
- 省市区三级联动城市选择器(仿iOS滚轮实现)
- 微信小程序学习:使用picker封装省市区三级联动模板
- 【2018最新的省市区】获取json,实现三级联动选择省市区(底部源码地址)
- city-picker插件使用-移动h5三级联动
- 手把手教你webpack+vue+amaze-vue实现省市区三级联动选择组件
- 在ASP.NET MVC中实现一种不同于平常的三级联动、级联方式, 可用于城市、车型选择等多层级联场景