这次给大家带来微信小程序开发中怎样做出城市选择，微信小程序开发中做出城市选择的注意事项有哪些，下面就是实战案例，一起来看一下。
本文实例为大家分享了微信小程序城市选择器，供大家参考，具体内容如下
代码很简单.
var city = require('../../utils/city.js');var app = getapp()page({ data: { searchletter: [], showletter: , winheight: 0, // theight: 0, // bheight: 0, citylist: [], isshowletter: false, scrolltop: 0,//置顶高度 scrolltopid: '',//置顶id city: 上海市, hotcitylist: [{ citycode: 110000, city: '北京市' }, { citycode: 310000, city: '上海市' }, { citycode: 440100, city: '广州市' }, { citycode: 440300, city: '深圳市' }, { citycode: 330100, city: '杭州市' }, { citycode: 320100, city: '南京市' }, { citycode: 420100, city: '武汉市' }, { citycode: 410100, city: '郑州市' }, { citycode: 120000, city: '天津市' }, { citycode: 610100, city: '西安市' }, { citycode: 510100, city: '成都市' }, { citycode: 500000, city: '重庆市' }] }, onload: function () { // 生命周期函数--监听页面加载 var searchletter = city.searchletter; var citylist = city.citylist(); var sysinfo = wx.getsysteminfosync(); var winheight = sysinfo.windowheight; var itemh = winheight / searchletter.length; var tempobj = []; for (var i = 0; i < searchletter.length; i++) {  var temp = {};  temp.name = searchletter[i];  temp.theight = i * itemh;  temp.bheight = (i + 1) * itemh;  tempobj.push(temp) } this.setdata({  winheight: winheight,  itemh: itemh,  searchletter: tempobj,  citylist: citylist }) }, onready: function () { // 生命周期函数--监听页面初次渲染完成 }, onshow: function () { // 生命周期函数--监听页面显示 }, onhide: function () { // 生命周期函数--监听页面隐藏 }, onunload: function () { // 生命周期函数--监听页面卸载 }, onpulldownrefresh: function () { // 页面相关事件处理函数--监听用户下拉动作 }, onreachbottom: function () { // 页面上拉触底事件的处理函数 }, clickletter: function (e) { console.log(e.currenttarget.dataset.letter) var showletter = e.currenttarget.dataset.letter; this.setdata({  showletter: showletter,  isshowletter: true,  scrolltopid: showletter, }) var that = this; settimeout(function () {  that.setdata({  isshowletter: false  }) }, 1000) }, //选择城市 bindcity: function (e) { console.log(bindcity) this.setdata({ city: e.currenttarget.dataset.city }) }, //选择热门城市 bindhotcity: function (e) { console.log(bindhotcity) this.setdata({  city: e.currenttarget.dataset.city }) }, //点击热门城市回到顶部 hotcity: function () { this.setdata({  scrolltop: 0, }) }})
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue-cli3.0增加了哪些新特效
怎样操作jquery元素
以上就是微信小程序开发中怎样做出城市选择的详细内容。