前两天在实现一个城市选择器的需求的时候，在github上看到了BeijiYang同学的开源项目，觉得做的非常不错，不过是基于原生小程序写的，所以就花了点时间把他的项目基于mpvue框架改写了。方便让使用mpvue框架的同学使用。
贴一下原项目的地址，还在使用小程序自带框架的同学可以使用这个库哦 项目地址
先一起看一下实现的效果图:
城市选择器示例.gif
在改写完代码以后，我也来谈谈这个小组件里的实现逻辑。首先从布局开始，这个页面的布局结构由三个主要部分构成，页面顶部的搜索框，页面最右侧的字母列表栏，以及左边的最主要的城市列表部分。具体的页面代码我就不贴了，github链接我会放在文章尾部。
我们将地级市的数据存放到本地的city.js文件中，在这个city.js的文件中，还同时包括城市检索的首字母的数组数据，页面的城市列表以及首字母检索的数据就会从city.js中读取。在页面生命周期开始时，我们得获取当前设备的屏幕高度，用以计算右侧首字母列表的单个item高度，并且要将首字母检索的数组重组结构，最后绑定到当前页面的data下，如下的逻辑
const searchLetter = city.searchLetter;const cityList = city.cityList();const sysInfo = wx.getSystemInfoSync();console.log(sysInfo);const winHeight = sysInfo.windowHeight;console.log(winHeight);const itemH = winHeight / searchLetter.length;
searchLetter.map( (item, index) => { let temp = {};
temp.name = item;
temp.tHeight = index * itemH;
temp.bHeight = (index + 1) * itemH;
tempArr.push(temp);
}
);console.log(tempArr);this.winHeight = winHeight;this.itemH = itemH;this.searchLetter = tempArr;this.cityList = cityList;this.getLocation();在进入页面后，还需要定位当前的城市区县，所以有了上面源码的最后一行，getLocation()函数，这个函数的主要目的是为了获取到当前定位。
跟小程序原生项目不同的是我们的项目使用了Vuex来管理数据，所以原项目中需要全局保存的变量都被我使用了Vuex来管理，并且把通过腾讯地图API获取区县列表的逻辑也放入了Vuex内，让我们的组件内部只处理UI事件，变得更简洁干净，更易维护。
在点击了城市的Cell之后，接下来的操作就是通过腾讯地图API去请求接口，获取当前城市的附属区县数据，展示并可以再次点选。
/* component中的UI操作 */// 选择城市bindCity(e) { this.condition = true; this.changeCity({ city: e.currentTarget.dataset.city, code: e.currentTarget.dataset.code
}); this.scrollTopId = 'selectcounty'; this.completeList = []; this.selectCounty();
}/* Vuex中的selectCounty()函数 */// 根据城市代码 定位区县[CITY_SELECT_COUNTY]({ commit, state }) {console.log('正在定位区县');let code = state.currentCityCode;
wx.request({ url: `https://apis.map.qq.com/ws/district/v1/getchildren?&id=${code}&key=${config.key}`, success: function(res) {
commit({ type: CITY_SELECT_COUNTY, list: res.data.result[0]
}); console.log(res.data); console.log('请求区县成功' + `https://apis.map.qq.com/ws/district/v1/getchildren?&id=${code}&key=${config.key}`);
}, fail: function() { console.log('请求区县失败，请重试');
}
});
},这里就是主要的点选逻辑，接下来看看搜索框实现的搜索逻辑。我们的搜索框要求能够通过汉字或者拼音搜索，所以在搜索逻辑中，我们根据对象的short和shorter属性来进行匹配，具体的逻辑可以看如下代码:
/**
* 搜索匹配逻辑
*/auto() { let inputSd = this.inputName.trim(); let sd = inputSd.toLowerCase(); let num = sd.length; const cityList = city.cityObjs; let finalCityList = []; let temp = cityList.filter( item => { let text = item.short.slice(0, num).toLowerCase(); // eslint-disable-next-line
return (text && text == sd);
}
); // 在城市数据中，添加简拼到“shorter”属性，就可以实现简拼搜索
let tempShorter = cityList.filter( itemShorter => { if (itemShorter.shorter) { let textShorter = itemShorter.shorter.slice(0, num).toLowerCase(); // eslint-disable-next-line
return (textShorter && textShorter == sd);
}
}
); let tempChinese = cityList.filter( itemChinese => { let textChinese = itemChinese.city.slice(0, num); // eslint-disable-next-line
return (textChinese && textChinese == sd);
}
); if (temp[0]) {
temp.map( item => { let testObj = {};
testObj.city = item.city;
testObj.code = item.code;
finalCityList.push(testObj);
}
); this.completeList = finalCityList;
} else if (tempShorter[0]) {
tempShorter.map( item => { let testObj = {};
testObj.city = item.city;
testObj.code = item.code;
finalCityList.push(testObj);
}
); this.completeList = finalCityList;
} else if (tempChinese[0]) {
tempChinese.map( item => { let testObj = {};
testObj.city = item.city;
testObj.code = item.code;
finalCityList.push(testObj);
}
); this.completeList = finalCityList;
}
}到这里，搜索功能也完成了，剩下无非就是各个界面的通信、以及组件与页面间的通信了，肯定也是各位同学必备的基本功了，也就不讲了。有其他疑问的可以直接阅读源码。
下面放上github仓库地址: 微信小程序-城市选择组件
如果对你有帮助，请给我一个star谢谢。
同时谢谢原作者的开源，是你的开源让使用mpvue的同学得到帮助。
作者：Originalee
链接：https://www.jianshu.com/p/2db4e0e3bee8
随时随地看视频
