var str = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
		var $vue = new Vue({
			el: '#app',
			data: {
				listArr: str,
				tips: '',
				state: false
			},
			mounted: function() {

			},
			methods: {
				touchFun: function(ev) {
					getMousePos(ev);
				},
				fouchendFun: function() {
					setTimeout(function fun() {
						$vue.state = false;
					}, 500)
				}
			}
		})

		function getMousePos(event) {
			var e = event || window.event;
			var _touch = e.touches[0];
			var y = Number(_touch.pageY);
			var h = document.body.clientHeight||window.innerHeight;
			var i = parseInt(y / (h / 26));
			(i < 0) ? i = 0: i = i;
			(i > 25) ? i = 25: i = i;
			var top = document.getElementsByClassName(str[i])[0].offsetTop;
			document.getElementsByClassName('list-box')[0].scrollTop = top;
			$vue.tips = str[i];
			$vue.state = true;
		}
		document.querySelector('body').addEventListener('touchmove', function(e) {
			if(!document.querySelector('.list-box').contains(e.target)) {
				e.preventDefault();
			}
		})