jQuery手机城市索引【原创】

查看演示 下载资源 下载积分： 90 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

城市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();