快應用之地圖——獲取全國的省/直轄市、市/區、縣
阿新 • • 發佈:2018-12-19
最近在學快應用哦,學的過程模仿滴滴寫頁面再加深理解和運用,發覺哦,很有趣哦。
好啦,開始我們的正題。使用快應用的資料請求介面fetch(需要import哦)來向本地的服務請求資料,獲取全國的省/直轄市(相關的資料url:https://github.com/Enmeng/ChinesePlacename.git),將獲得的資料用select、option組合展示出來,使用者選擇其中一個選中,觸發select的onchange事件,在處理事件中根據選擇項的值向伺服器請求該省/直轄市的下一級的地名,並用下一個select、option組合來顯示,一直下鑽到區。
下面是相關的部分程式碼哦。
index.ux中的select部分
<div class="item addressList"> <div> <text class="tipText">省/直轄市</text> <select @change="selectProChange"> <option for="pro in listPro">{{pro}}</option> </select> <text class="tipText" style="font-size:60px;"><span>|</span></text> </div> <div> <text class="tipText">市/區</text> <select @change="selectCityChange"> <option for="city in listCity">{{city}}</option> </select> <text class="tipText" style="font-size:60px;"><span>|</span></text> </div> <div> <text class="tipText">區</text> <select @change="selectCountyChange"> <option for="county in listCounty">{{county}}</option> </select> </div> </div>
接下來是處理事件部分
onInit:function(){ prompt.showToast({message:this.currentCity}); var that=this; fetch.fetch({ url:that.baseUrl, success: function (response) { that.listPro=[].concat(JSON.parse(response.data)); }, fail: function (err, code) { prompt.showToast({message:err}); } }) }, enterKeyClick:function(res){ this.selectCity=res.value; }, selectProChange:function(res){ this.selectPro=res.newValue; var url=this.baseUrl+'?currentPro='+this.selectPro; var that=this; fetch.fetch({ url: url, success: function (response) { that.listCity=[].concat(JSON.parse(response.data)); }, fail: function (err, code) { prompt.showToast({message:err}); } }) }, selectCityChange:function(res){ this.selectCity=res.newValue; var url=that.baseUrl+'?currentPro='+this.selectPro+'&¤tCity='+this.selectCity; var that=this; fetch.fetch({ url:url, success:function(response){ that.listCounty=[].concat(JSON.parse(response.data)); }, fail:function(err,code){ prompt.showToast({message:err}); } }) }, selectCountyChange:function(res){ this.selectCounty=res.newValue; },