特效详情：

vue手机移动端城市定位和选择代码，默认获取我的当前所在城市定位，可自定义更换选择城市，带城市列表首字母导航功能。请在手机端查看演示，电脑端无法选择。

js代码

var app = new Vue({

el: '#app',

data: {

origin: 'http://192.168.99.205:800',

captchaBoxShow: false,

test: '测试',

countTime: 0,

countTimer: null,

time: 60,

location: '定位中',

submit: {

sms_captcha  : '',

captcha      : '',

area_code    : '',

_token       : '',

},

map: new AMap.Map("container", {

resizeEnable: true,

//city: citycode,

zoom: 17, //地图显示的缩放级别

keyboardEnable: false,

citylimit: true,

resizeEnable: true

}),

cityWrapper: document.querySelector('.city-wrapper-hook'),

cityScroller: document.querySelector('.scroller-hook'),

cities: document.querySelector('.cities-hook'),

shortcut: document.querySelector('.shortcut-hook'),

shortcutList: [],

cityData: cityData,// 数据源

scroll: null,

anchorMap: {},

touch: {},

toastShow: false,

isShowCitys: false,

toastText: '',

},

methods: {

toast (str) {

let v = this

v.toastText = str

v.toastShow = true

setTimeout(function(){

v.toastShow = false

}, 1500)

},

chooseCity (city) {

let v = this

v.countTime = 0

v.countTimer = setInterval(function(e){v.countTime ++},1)

},

touchUp (item) {

let v = this

clearInterval(v.countTimer)

if (v.countTime < 30) {

this.isShowCitys = false

this.location = item.name

this.submit.area_code = item.code

}

},

selectLocation () {

let v = this

this.isShowCitys = true

this.$nextTick(function() {

this.initCities()

})

},

geocoder_CallBack: function (data) {

let v = this

var adcode3     = data.regeocode.addressComponent.adcode;

var address     = data.regeocode.formattedAddress; //返回地址描述

var csqy        = data.regeocode.addressComponent.district; //地区

var csadcode    = data.regeocode.addressComponent.adcode; //区域编码

this.submit.area_code = csadcode

var citycode2   = csadcode.substr(0, 4) + "00"; //省份编码

var codes       = adcode3.substr(0, 4) + "00";

var citys2      = data.regeocode.addressComponent.city;

var poiArr      = data.regeocode.pois; //坐标

var resultCount = poiArr.length;

v.location      = csqy

var dz          = data.regeocode.formattedAddress;

var lng         = data.regeocode.roads[0].location.lng;

var lat         = data.regeocode.roads[0].location.lat;

},

zddw: function () {

//初始定位

let v = this

v.map.plugin('AMap.Geolocation', function() {

geolocation = new AMap.Geolocation({

enableHighAccuracy: true, //是否使用高精度定位，默认:true

//timeout: 10000, //超过10秒后停止定位，默认：无穷大

buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)

zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false

noIpLocate: 0, //IP定位，0-3，0都可以使用

noGeoLocation: 0, //浏览器定位 0-3,

showCircle: false, //去除定位蓝圈

buttonPosition: 'RT',

extensions: 'all'

});

v.map.addControl(geolocation);

geolocation.getCurrentPosition();

AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息

AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息

});

//解析定位结果

function onComplete(data) {

var str = [];

str.push(data.position.lng);

str.push(data.position.lat);

var geocoder = new AMap.Geocoder({

radius: 1000,

extensions: "all"

});

geocoder.getAddress(str, function(status, result) {

if (status === 'complete' && result.info === 'OK') {

v.geocoder_CallBack(result);

}

});

}

// 解析定位错误信息

function onError(data) {

alert('定位失败,请手动选择所在区域');

}

},

initCities: function () {

let v = this

let y = 0;

var titleHeight = 28

var itemHeight = 44

v.cityData.forEach(function(e){

let name = e.name.substr(0, 1)

let len = e.cities.length

v.anchorMap[name] = y

y -= titleHeight + len * itemHeight

})

v.shortcut = document.querySelector('.shortcut-hook')

v.cityWrapper = document.querySelector('.city-wrapper-hook')

v.shortcut.style.top = (v.cityWrapper.clientHeight - v.shortcut.clientHeight) / 2 + 'px';

v.scroll = new window.BScroll(v.cityWrapper, {

probeType: 3

})

// console.log(v.scroll, 'v.scroll')

// v.scroll.hasVerticalScroll = true

// v.scroll.wrapperHeight = $('body').height()

v.scroll.scrollTo(0, 0);

},

touchIndex: function (e) {

// console.log(e, 'e')

let v = this

let anchor = e.target.getAttribute('data-anchor')

// console.log(anchor ,'anchor')

let firstTouch = e.touches[0]

v.touch.y1 = firstTouch.pageY

v.touch.anchor = anchor

v.scrollTo(anchor)

},

scrollTo: function (anchor) {

let v = this

v.cityScroller = document.querySelector('.scroller-hook')

var maxScrollY = v.cityWrapper.clientHeight - v.cityScroller.clientHeight

var y = Math.min(0, Math.max(maxScrollY, v.anchorMap[anchor]))

if (typeof y !== 'undefined') {

v.scroll.scrollTo(0, y);

}

},

},

mounted: function () {

let v = this

this.zddw()

v.initCities()

},

})