VUE开发一个组件——Vue H5城市选择控件

前言

昨天用《VUE开发一个组件——Vue PC城市选择控件》 , 有朋友说需要用字母筛选，其实已经用字母筛选了，不过是每4个，没有对单个，所以H5我们就用单个字母快速查找。

数据部分

和《VUE开发一个组件——Vue PC城市选择控件》 一样，但是不需要每4个再分组了。

cityListData(){
  let map = {};
  let temps = [];
  this.dataList.map(item=>{
	  if(item.airportCode){
		  let ekey = item.airportCode.charAt(0).toUpperCase();
		  temps = map[ekey] || [];
		  temps.push({
			  airportCode: item.airportCode,
			  airportName: item.cityName
		  });
		  map[ekey] = temps;
	  }
  })
  let list = [];
  for(let gkey in map) {
	  list.push({
		  ckey: gkey,
		  cityList: map[gkey]
	  })
  }
  list = list.sort((li1, li2)=> li1.ckey.charCodeAt(0) - li2.ckey.charCodeAt(0));
  return list;
},
cityListKey(){
  let cityListKey = [];
  this.cityListData.map(item=>{
	  cityListKey.push(item.ckey);
  })
  return cityListKey;
}

cityListData整理后的数据，cityListKey是所有字母。

页面部分

	

	  

		
	  
	  

		

		

		  
{{item.ckey}}
		  

			
{{ritem.airportName}}
		  
		
	  
	  

		
{{item}}
	  
	  
{{activeKey}}
	

search没有开发（用关键字搜索）、city-list遍历cityListData、filter筛选字母列表、active-key提示当前选择是那个字母。

.city-wap{
  color: #3b4f62;
  .clearfix{
    &:after{
      content: '';
      display: block;
      clear: both;
    }
  }
  p{
    background: #fff;
    margin-bottom: 10px;
    padding: 0 12px;
  }
  .search{
    position: fixed;
    top: 0;
    box-shadow: 0 1px 3px 0 rgba(59,79,98,0.1);
    width: 100%;
    height: 50px;
    input{
      line-height: 50px;
      width: 100%;
      border: none;
      box-shadow: none;
      padding: 0 10px;
      &:focus { 
 outline: none; 
      } 
    }
  }
  .city-list{
    .block-60{
      height: 60px;
    }
    ul{
      padding: 0 10px;
      li{
 list-style: none;
 display: inline-block;
 margin-right: 10px;
 width: 29%;
 margin-bottom: 8px;
 line-height: 35px;
 text-align: center;
 color: #333;
 border-radius: 3px;
 background: #fff;
 font-size: 14px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 padding: 0 2px;
      }
    }
  }
  .filter{
    position: fixed;
    right: 3px;
    top: 60px;
    font-size: 15px;
    div{
      margin-top: 2px;
      text-align: center;
    }
  }
  .active-key{
    position: fixed;
    width: 100px;
    height: 100px;
    line-height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background: #dedede;
    color: #fff;
    border-radius: 100%;
    text-align: center;
    font-size: 40px;
  }
}

这里的.block-60主要是用来占位，不然城市会被上方的搜索框盖住。

事件

switchKey(key){
  // 当前选中的字母
  this.activeKey = key;
  // 1秒后清空，让`active-key`隐藏
  setTimeout(()=>{
	this.activeKey = '';
  }, 1000)
  // 获取当前字母来cityList中距离顶部的位置
  let targetTop = document.querySelector('#'+key+'').offsetTop;
  window.scrollTo({ 
	  top: targetTop - 60, // 60是search的高度
	  behavior: "smooth" 
  });
}

这样就完工，是不是很简单了？

源码地址：vue-c-city

如果要PC<=>H5互换，需要修改main.js里面的代码。