1. 程式人生 > >快應用之地圖——獲取全國的省/直轄市、市/區、縣

快應用之地圖——獲取全國的省/直轄市、市/區、縣

最近在學快應用哦,學的過程模仿滴滴寫頁面再加深理解和運用,發覺哦,很有趣哦。

好啦,開始我們的正題。使用快應用的資料請求介面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+'&&currentCity='+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;
      },