如何在微信小程序开发中做城市选择(如何在微信小程序开发中做城市选择功能)

这次给大家带来的是如何在微信小程序开发中进行城市选择，以及在微信小程序开发中进行城市选择有哪些注意事项？下面是实际案例，大家来看看。

本文分享微信小程序城市选择器，供大家参考。具体如下。

代码很简单。

var city = require(& # 039；../../utils/city . js & # 039；);var app = getApp()Page({ data:{ search letter:[]，show letter:& quot；"，winheight: 0，//title: 0，//b height: 0，citylist: []，isshowletter: false，scrolltop: 0，//top height scroll topid:& # 039；'，//Top id城市: "上海&quot，hotcityList: [{ cityCode: 110000，city:& # 039；北京& # 039；}，{城市代码:310000，城市:& # 039；上海& # 039；}，{城市代码:440100，城市:& # 039；广州& # 039；}，{城市代码:440300，城市:& # 039；深圳& # 039；}，{城市代码:330100，城市:& # 039；杭州& # 039；}，{城市代码:320100，城市:& # 039；南京& # 039；}，{城市代码:420100，城市:& # 039；武汉& # 039；}，{城市代码:410100，城市:& # 039；郑州市& # 039；}，{城市代码:120000，城市:& # 039；天津& # 039；}，{城市代码:610100，城市:& # 039；Xi安& # 039；}，{城市代码:510100，城市:& # 039；成都& # 039；}，{城市代码:500000，城市:& # 039；重庆& # 039；}] }，onLoad: function () {//生命周期函数--监控页面加载var search letter = city . search letter；var city list = city . city list()；var sysInfo = wx . getsysteminfosync()；var winHeight = sysinfo . window height；var itemH = winHeight/search letter . length；var temp obj =[]；for(var I = 0；我& ltsearch let . length；i++){ var temp = { }；temp . name = search letter[I]；temp.tHeight = i * itemHtemp . BH height =(I+1)* itemH；temp obj . push(temp)} this . setdata({ winHeight:winHeight，itemH: itemH，searchLetter: tempObj，cityList: cityList }) }、Ready:function(){//生命周期函数--监控页面显示完成}、onShow: function () {//生命周期函数--监控页面显示}、onHide: function () {//生命周期函数--监控页面隐藏}、Unload:function(){//生命周期函数--监控页面卸载}、onpulldownresh:function(){//功能this . setdata({ show letter:show letter，isShowLetter: true，scrollTopId: showLetter，}) var，即= thisSetTimeout(function(){ that . setdata({ is show letter:false })}，1000)}，//选择城市bind city:function(e){ console . log(" bind city & quot；)this . setdata({ city:e . current target . dataset . city })}，//选择热门城市bind hot city:function(e){ console . log(" bindHotCity & quot；)this . setdata({ city:e . current target . dataset . city })}，//点击热门城市返回热门城市顶部:function(){ this . setdata({ scroll top:0，}}})相信你看完这个案例已经掌握了方法。更多精彩请关注即时码站其他相关文章！

推荐阅读:

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

如何操作JQuery元素