概述
最近在做最项目时，需要做一个按字母排序的方式展示城市的功能，为了在以后遇到相同功能的时候能够快速的开发，故将该功能进行了简单的整合；
数据来源
参考资料
https://blog.csdn.net/majormayer/article/details/51132338
思路
在页面初始化时，默认展示热门城市的数据；
初始化页面时，先将数据进行分组，在分组之前要排除热门城市的数据，对剩余的数据进行分组，分组方法是dividArr;
在点击tab切换页签时，将内容添加到对应的容器内；
代码
HTML
<div class="container">
<div class="city-picker">
<ul class="tab" id="tab">
<li class="item active"><span>热门</span></li>
<li class="item"><span>ABCD</span></li>
<li class="item"><span>EFGH</span></li>
<li class="item"><span>JKLM</span></li>
<li class="item"><span>NPQR</span></li>
<li class="item"><span>STWX</span></li>
<li class="item"><span>YZ</span></li>
</ul>
<div class="tab-content" id="tabContent">
<div class="content active"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
</div>
</div>
CSS
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
font-family: 'Microsoft YaHei';
padding: 0;
margin: 0;
}
ul,
ul li {
list-style: none;
}
.container {
padding: 15px;
box-sizing: border-box;
}
.city-picker {
width: 100%;
min-height: 72px;
}
.tab {
display: flex;
height: 42px;
margin: 0;
padding: 0;
}
.tab li {
flex: 1;
position: relative;
height: 42px;
line-height: 42px;
text-align: center;
cursor: pointer;
}
.tab li span {
display: block;
width: 100%;
height: 100%;
color: #333;
}
.tab li.active {
background: orangered;
color: #fff;
}
.tab li.active span {
color: #fff;
}
.tab-content {
width: 100%;
margin-top: 10px;
box-sizing: border-box;
}
.tab-content .content {
display: none;
float: left;
width: 100%;
height: 100%;
min-height: 20px;
border: 1px solid orangered;
border-radius: 3px;
-webkit-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-moz-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-ms-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.tab-content .content.active {
display: block;
}
.tab-content .content dl {
display: block;
padding: 5px;
margin: 5px;
color: olivedrab;
font-size: 14px;
cursor: pointer;
}
.tab-content .content dl dt {
display: block;
width: 100%;
line-height: 2;
color: orangered;
padding-left: 10px;
}
.tab-content .content dl dd {
display: inline-block;
padding: 0 5px;
margin: 5px;
color: #333;
font-size: 14px;
}
.tab-content .content dl dd:hover {
background: orangered;
color: #fff;
}
JS
window.onload = function() {
var oTab = getId("tab");
var aItem = getEle("li", oTab);
var oContainer = getId("tabContent");
var aContent = getByCls("content", oContainer);
var arr = list.slice();
arr.shift();
var data = dividArr(arr, 4);
tab(aItem, aContent, data);
loadHotCity(aContent[0]);
};
/**
* 根据id获取DOM元素
* @param {String} id DOM元素的id
* @return {Object} DOM对象
*/
function getId(id) {
return document.getElementById(id)
}
/**
* 通过tagName获取元素
*
* @param {String} tagName 标签名
* @param {Object} parent 父级元素
* @return {Array} 根据标签名得到的元素集合
*/
function getEle(tagName, parent) {
return parent.getElementsByTagName(tagName);
}
/**
* 通过tagName获取元素
*
* @param {String} cls 样式名
* @param {Object} parent 父级元素
* @return {Array} 根据样式名得到的元素集合
*/
function getByCls(cls, parent) {
return parent.getElementsByClassName(cls);
}
/**
* tab选项卡效果
*
* @param {Array} aItem tab页签li的集合
* @param {Array} aContent tab content
* @param {Array} group 分组后的数组
*/
function tab(aItem, aContent, group) {
for (let i = 0; i < aItem.length; i++) {
aItem[i].index = i;
aItem[i].onclick = function() {
var that = this;
clearCls(aItem, aContent);
this.className = "item active";
aContent[this.index].className = "content active";
switchCity(that, i, group);
};
}
}
/**
* 点击tab页签加载相应的城市数据
*
* @param {Object} target 当前点击的tab页签
* @param {Number} index 当前点击页签的索引
* @param {Array} group 分组后的数组
*/
function switchCity(target, index, group) {
var oContainer = getId("tabContent");
var aContent = getByCls("content", oContainer);
if (index == 0) {
aContent[0].innerHTML = '';
loadHotCity(aContent[0]);
} else {
aContent[index].innerHTML = '';
group[index - 1].forEach(function(item, a) {
var dl = document.createElement('dl')
var dt = document.createElement('dt');
dt.innerHTML = item.name;
dl.appendChild(dt);
item.citys.forEach(function(i, b) {
var dd = document.createElement('dd');
dd.innerHTML = i;
dd.setAttribute('data-index', b)
dl.appendChild(dd)
});
aContent[index].appendChild(dl);
});
}
}
/**
* 将一个数组分为n份
* @param {Array} arr 需要进行分组的数组
* @param {Number} n 每组元素个数
* @return {Array} 分组后的新数组
*/
function dividArr(arr, n) {
var x = 0,
y = x + n;
var result = [],
len = arr.length;
if (y >= len) {
return result.push(arr)
}
while (y < len) {
result.push(arr.slice(x, y));
x = x + n;
y = x + n;
if (y > len) {
y = len;
result.push(arr.slice(x, y));
break;
}
}
return result;
}
/**
* 清除tab页签的高亮显示效果
*
* @param {Array} aItem Item tab页签li的集合
* @param {Array} aContent tab content
*/
function clearCls(aItem, aContent) {
for (let i = 0; i < aItem.length; i++) {
aItem[i].className = "item";
aContent[i].className = "content";
}
}
/**
* 初始化加载热门城市
*
* @param {Object} hotCity 热门城市
*/
function loadHotCity(hotCity) {
var hotCitys = list[0];
hotCity.innerHTML = '';
var dl = document.createElement("dl");
hotCity.appendChild(dl)
var dt = document.createElement('dt')
dt.innerHTML = list[0].name;
dl.appendChild(dt);
hotCitys.citys.forEach(function(item, index) {
var oText = document.createElement('dd');
oText.innerHTML = item;
oText.setAttribute('data-index', index)
dl.appendChild(oText);
});
}
结果展示
结果.png
