ionic3 城市索引
效果图：
未处理城市数据：
html部分：
header 搜索栏部分：
<ion-header>
<ion-navbar>
</ion-navbar>
<ion-searchbar placeholder="请输入城市拼音或汉字" (ionInput)="getItems($event)"></ion-searchbar>
<div class="flexContainer current align_center">
<div class="f1 city">
目前所选定位：<span #containermap>{{curPos}}</span>
</div>
<div class="row_end reset" (click)="getPosition()">重新定位</div>
</div>
</ion-header>content部分： 主要是显示全部城市列表和经过搜索后过滤出来的列表
<ion-content>
<div class="citiesBox">
<div class="left_city" #left_city>
<div class="recent_title" *ngIf="cacheSearchCity.length">最近访问</div>
<div class="recent" *ngIf="cacheSearchCity.length">
<span *ngFor="let his of cacheSearchCity" (click)="citySelect(his)">{{his.name}}</span>
</div>
<div class="recent_title">已入驻城市</div>
<ion-list>
<!--搜索过滤的数组-->
<ion-item-sliding *ngFor="let c of filteredCities">
<ion-item (click)="citySelect(c)">{{c.name}}</ion-item>
</ion-item-sliding>
<!--全部城市数组-->
<ion-item-group *ngFor="let item of cities" #cityGroup>
<ion-item-divider>
<ion-label class="index_title">{{item.index}}</ion-label>
</ion-item-divider>
<ion-item *ngFor="let c of item.cities" (click)="citySelect(c)">{{c.name}}</ion-item>
</ion-item-group>
</ion-list>
</div>
</div>
</ion-content>footer部分： A~Z的字母索引
<ion-footer>
<!--A~Z的序号-->
<div id="indexs-bar" class="right_indexes">
<div class="index-bar" *ngFor="let item of rightIndexes;let i = index">{{item}}</div>
</div>
</ion-footer>
ts部分：
import { Component , ViewChild ,ElementRef , ViewChildren, OnInit, Renderer2} from '@angular/core';
import { IonicPage, NavController, NavParams , Content } from 'ionic-angular';
import { Http } from '@angular/http';
import { Utils } from '../../services/Utils';
import { NativeService } from '../../services/NativeService';
import { Storage } from '@ionic/storage';
@IonicPage()
@Component({
selector: 'page-location',
templateUrl: 'location.html',
})
export class LocationPage implements OnInit{
@ViewChild(Content) content: Content;
@ViewChildren('cityGroup') cityGroup;
@ViewChild("containermap") containermap: ElementRef;
curPos:string = ""; //当前定位
cities: Array<any> = []; //城市数组
oriCities: Array<any> = []; //城市数组--接口返回值
filteredCities: Array<any> = []; //过滤城市数组
cacheSearchCity:Array<any>=[];//历史搜索
//右侧字母排序数组
rightIndexes = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public http: Http,
public utils: Utils,
public nativeService: NativeService,
public storage: Storage,
public ele: ElementRef,
public r2: Renderer2,
) {
this.curPos = this.navParams.data.position !== "定位失败"?this.navParams.data.position:"";
this.storage.get("cache_currentCity").then(cacheCity=>{
if(cacheCity){
this.cacheSearchCity = cacheCity.length > 3 ? cacheCity.slice(0,3):cacheCity;
}else{
this.cacheSearchCity = [];
}
});
}
ngOnInit(){
let indexBar = this.ele.nativeElement.querySelector('#indexs-bar');
this.r2.listen(indexBar,"touchstart",(ev)=>{
console.log(ev);
this.alphabetMove(ev, false);
})
this.r2.listen(indexBar,"touchmove",(ev)=>{
console.log(ev);
this.alphabetMove(ev, false);
})
this.r2.listen(indexBar,"touchend",(ev)=>{
console.log(ev);
this.alphabetMove(ev, true);
})
}
/**
*
* 滚动效果
* @param {*} e
* @param {*} move
* @returns
* @memberof LocationPage
*/
alphabetMove(e, move) {
let currentItem;
currentItem = e.target;
if (!currentItem || currentItem.className.indexOf('index-bar') < 0) return;
if (move) {
let index = this.rightIndexes.join('').indexOf(currentItem.innerText);
let scrollHeight = this.cityGroup._results[index].nativeElement.offsetTop;
this.content.scrollTo(this.content.contentTop,scrollHeight,300);
}
}
/**
*当前定位
*
* @memberof LocationPage
*/
getPosition(){
this.utils.getGeoLocation(this.containermap.nativeElement)
.then(pos=>{
console.log(`position:${pos}`);
if(pos.info=="SUCCESS"){
this.curPos = pos.addressComponent.city;
}
},()=>{
this.nativeService.showToast("定位失败，请点击手动定位");
})
}
ionViewDidLoad() {
this.storage.get("citydata")
.then(data=>{
if(data){
this.cities = this.getGroupCities(data);
this.oriCities = data;
}else{
this.http.get('http://180.100.213.151:9090/jxm/a/sys/area/anon/queryCity')
.subscribe((citisArr:any)=>{
citisArr = citisArr.json();
if(citisArr.success){
this.oriCities = citisArr.body.cities;
this.cities = this.getGroupCities(this.oriCities);
this.storage.set("citydata",this.oriCities);
}
})
}
})
}
/**
* 城市分组排序
*/
getGroupCities(cities){
var group = [];
this.rightIndexes.forEach(c => {
let cCities = cities.filter(cityItem=>cityItem.index===c);
group.push({
index:c,
cities:cCities
})
});
return group;
}
/**
* 点击选择搜索的城市
* @param city 选择的城市
*/
citySelect(city) {
this.utils.setSearchCon("cache_currentCity",city,"name",3);
}
/**
*城市搜索
*
* @memberof LocationPage
*/
getItems(ev){
var newVal = ev.target.value;
if (newVal) {
this.filteredCities = this.filterCities(newVal);
console.log(this.filteredCities);
}
else {
this.filteredCities = [];
}
this.content.scrollToTop(500);
}
/**
*过滤符合条件的城市
*
* @param {*} val
* @memberof LocationPage
*/
filterCities(val){
var filterCities = [];
this.oriCities.filter(item=>{
if(item.name.indexOf(val)>-1){
filterCities.push(item);
}
})
return filterCities;
}
}
css:
page-location {
background: transparent;
.search {
@extend .search_com;
background: url("../../assets/imgs/searchIcon.png") #f6f6f6 $px11 center no-repeat;
background-size:$px15;
}
.reset {
margin: 0 $px12;
background: url(../../assets/imgs/zhinz.png) #fff right $px1 no-repeat;
background-size: $px12;
padding-right: $px15;
color: #999;
}
.current {
padding: $px11;
background-color: #fff;
min-height: $px44;
.city {
font-size: $px16;
span {
font-size: $px18;
font-weight: 200;
}
}
}
.recent_title {
height: $px34;
line-height: $px34;
font-size: $px15;
background-color: #f3f3f3;
padding-left:$px11;
}
.recent {
display: flex;
height: $px44;
justify-content: center;
align-items: center;
span {
flex: 1;
text-align: center;
font-size: $px16;
font-weight: 200;
display: inline-block;
}
}
//-------------------------
.scroll-content{
margin-bottom: 0 !important;
width: 90%;
}
.citiesBox{
width: 100%;
.left_city{
overflow: scroll;
}
}
/* 列表 */
.item-divider-ios{
background: #fff;
}
.item-block{
min-height: inherit;
}
.label-ios{
font-size: $px15;
}
ion-footer{
top:14rem;
right: 0;
left: 90%;
width: 10%;
padding: 0;
.right_indexes{
text-align: center;
color: #cb9e5e;
div{
cursor: pointer;
}
}
}
}over~