做微信或手机移动端项目经常会遇到全国省市索引页面,今天就介绍一款非常棒的按首字母检索城市列表的插件
城市json数据
var cityData = [
{
name: "★热门城市",
cities: [
{
name: "北京市",
tags: "BEIJING,北京市",
cityid: 1
},
{
name: "上海市",
tags: "SHANGHAI,上海市",
cityid: 4
},
{
name: "深圳市",
tags: "SHENZHEN,深圳市",
cityid: 2
},
{
name: "广州市",
tags: "GUANGZHOU,广州市",
cityid: 3
},
{
name: "武汉市",
tags: "WUHAN,武汉市",
cityid: 6
}
]
},
{
name: "A",
cities: [
{
name: "鞍山市",
tags: "ANSHAN,鞍山市",
cityid: 64
},
{
name: "安庆市",
tags: "ANQING,安庆市",
cityid: 149
},
{
name: "安阳市",
tags: "ANYANG,安阳市",
cityid: 174
},
{
name: "阿拉善盟",
tags: "ALASHANMENG,阿拉善盟",
cityid: 202
},
{
name: "阿坝州",
tags: "ABAZHOU,阿坝州",
cityid: 290
},
{
name: "安顺市",
tags: "ANSHUN,安顺市",
cityid: 294
},
{
name: "阿里地区",
tags: "ALIDIQU,阿里地区",
cityid: 316
},
{
name: "安康市",
tags: "ANKANG,安康市",
cityid: 320
},
{
name: "阿克苏地区",
tags: "AKESUDIQU,阿克苏地区",
cityid: 348
},
{
name: "阿勒泰地区",
tags: "ALETAIDIQU,阿勒泰地区",
cityid: 355
},
{
name: "阿拉尔市",
tags: "ALAER,阿拉尔市",
cityid: 356
}
]
},
];
引入bscroll移动端DIV页面触屏滚动插件
<script src="js/bscroll.min.js"> </script>
<script src="js/city.js"> </script>
函数initCities()循环遍历city.js中的城市数据,提取其中的城市名称、首字母和id信息,一次性加入到数据列表中。接着调用BScroll插件方法。
function initCities() {
var y = 0;
var titleHeight = 28;
var itemHeight = 44;
var lists = '';
var en = '<ul>';
cityData.forEach(function (group) {
var name = group.name;
lists += '<div class="title">'+name+'</div>';
lists += '<ul>';
group.cities.forEach(function(g) {
lists += '<li class="item" data-name="'+ g.name +'" data-id="'+ g.cityid +'"><span class="border-1px name">'+ g.name +'</span></li>';
});
lists += '</ul>';
var name = group.name.substr(0, 1);
en += '<li data-anchor="'+name+'" class="item">'+name+'</li>';
var len = group.cities.length;
anchorMap[name] = y;
y -= titleHeight + len * itemHeight;
});
en += '</ul>';
cities.innerHTML = lists;
shortcut.innerHTML = en;
shortcut.style.top = (cityWrapper.clientHeight - shortcut.clientHeight) / 2 + 'px';
scroll = new window.BScroll(cityWrapper, {
probeType: 3 //1 会截流,只有在滚动结束的时候派发一个 scroll 事件。2在手指 move 的时候也会实时派发 scroll 事件,不会截流。 3除了手指 move 的时候派发scroll事件,在 swipe(手指迅速滑动一小段距离)的情况下,列表会有一个长距离的滚动动画,这个滚动的动画过程中也会实时派发滚动事件
});
scroll.scrollTo(0, 0);
}
然后函数bindEvent()绑定事件,监听右侧首字母的touchstart和touchmove事件。
function bindEvent() {
var touch = {};
var firstTouch;
shortcut.addEventListener('touchstart', function (e) {
var anchor = e.target.getAttribute('data-anchor');
firstTouch = e.touches[0];
touch.y1 = firstTouch.pageY;
touch.anchor = anchor;
scrollTo(anchor);
});
shortcut.addEventListener('touchmove', function (e) {
firstTouch = e.touches[0];
touch.y2 = firstTouch.pageY;
var anchorHeight = 16;
var delta = (touch.y2 - touch.y1) / anchorHeight | 0;
var anchor = shortcutList[shortcutList.indexOf(touch.anchor) + delta];
scrollTo(anchor);
e.preventDefault();
e.stopPropagation();
});
function scrollTo(anchor) {
var maxScrollY = cityWrapper.clientHeight - cityScroller.clientHeight;
var y = Math.min(0, Math.max(maxScrollY, anchorMap[anchor]));
if (typeof y !== 'undefined') {
scroll.scrollTo(0, y);
}
}
}
最后调用执行两个函数。
initCities();
bindEvent();
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791