选择所在城市html按字母，原⽣js实现html⼿机端城市列表索引
选择城市
本⽂实例为⼤家分享了js实现⼿机端城市列表索引选择城市的具体代码，供⼤家参考，具体内容如下
html部分：
定位城市
上海市
css部分：
*{
margin: 0;
padding: 0;
list-style: none;
}
html{
font-size: 12px;
}
body {
background-color: #f5f5f5;
font-family: 'PingFang SC Regular', 'PingFang SC';
width: 100%;
height: 100%;
min-width: 320px;
max-width: 480px;
position: relative;
}
.cityPage {
width: 100%;
height: 100%;
/* border: 1px solid black; */
position: relative;
top: 0;
display: flex;
flex-direction: column;
/* justify-content: center; */
}
.cityContent {
width: 100%;
height: 140px;
/* border: 1px solid black; */ background: #f7f7f9;
position: fixed;
z-index: 9999;
top: 0;
}
.inputBox input {
width: 90%;
height: 30px;
border: 1px solid rgb(215, 215, 215); outline: none;
background: #fff;
margin-left: 4%;
border-radius: 4px;
padding-left: 4px;
color: #9e9e9e;
font-size: 14px;
margin-bottom: 16px;
margin-top: 14px;
}
.
localCity {
color: #333;
font-size: 13px;
font-weight: bold;
margin-left: 4.5%;
margin-bottom: 16px;
}
.cityname {
font-size: 13px;
margin-left: 4.5%;
margin-bottom: 16px;
}
#list {
font-size: 13px;
position: fixed;
height: 100%;
top: 140px;
width: 100%;
overflow: scroll;
font-size: 15px;
/* margin-bottom: 140px; */ /* bottom: 200px; */
}
#list>section {
overflow-y: auto;
height: 100%;
margin-bottom: 140px;
}
#list>section>dl>dt { background: #f7f7f9; color: #999;
height: 40px;
line-height: 40px;
padding-left: 15px;
}
#list>section>dl>dd {
color: #333;
line-height: 40px;
padding-left: 15px; position: relative; background-color: #fff;
}
#list>section>dl>dd:after { content: '';
position: absolute;
bottom: 1px;
width: 100%;
height: 1px;
background-color: #c8c7cc; transform: scaleY(.5);
-webkit-transform: scaleY(.5);
}
#list>section>dl>dd:last-of-type:after { display: none;
}
#navBar {
position: fixed;
width: 26px;
height: 50%;
right: 0;
z-index: 30;
top: 50%;
display: flex;
flex-direction: column;
margin-top: -25%;
/* text-align: center; */
}
#navBar.active {
background: rgba(211, 211, 211, .6); }
#navBar>div {
text-align: center;
display: block;
text-decoration: none;
/* height: 4.166%;
line-height: 100%; */
color: #333;
font-size: 13px;
}
.letterBox{
width: 40px;
height: 40px;
background:#9f9f9f;原生js和js的区别
opacity: .5;
position: fixed;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
text-align: center;
line-height: 40px;
color: #fff;
display: none;
}
js部分：
$(function () {
initCities(cityData);
clickAction()
//输⼊城市查询
var key = false;
$('#findcityInp').on('compositionstart', function () { key = true;
console.log('不搜索')
});
$('#findcityInp').on('compositionend', function (e) { var keyWord = $.trim(e.target.value);
if(keyWord.length>0){
var result = findCity(keyWord, cityData);
initCities(result);
bindEvent();
}else{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。