這次帶給大家微信小程式開發(fā)中怎樣做出城市選擇，微信小程式開發(fā)中做出城市選擇的注意事項有哪些，以下就是實戰(zhàn)案例，一起來看一下。

本文實例為大家分享了微信小程式城市選擇器，供大家參考，具體內(nèi)容如下

程式碼很簡單.

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?()?{
?//?生命周期函數(shù)--監(jiān)聽頁面加載
?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?()?{
?//?生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
?},
?onShow:?function?()?{
?//?生命周期函數(shù)--監(jiān)聽頁面顯示
?},
?onHide:?function?()?{
?//?生命周期函數(shù)--監(jiān)聽頁面隱藏
?},
?onUnload:?function?()?{
?//?生命周期函數(shù)--監(jiān)聽頁面卸載
?},
?onPullDownRefresh:?function?()?{
?//?頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
?},
?onReachBottom:?function?()?{
?//?頁面上拉觸底事件的處理函數(shù)
?},
?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,
?})
?}
})

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關注php中文網(wǎng)其它相關文章！

推薦閱讀：

vue-cli3.0增加了哪些新特效

##怎麼運算JQuery元素

以上是微信小程式開發(fā)如何做出城市選擇的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！