网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

微信小程序學習:使用picker封裝省市區三級聯動模板

發布時間:2018-04-08 10:45 所屬欄目:小程序開發教程
作者草燈,來自授權地址,本文寫于1028版本時代,請酌情參考;

     目前學習小程序更多的是看看能否二次封裝其它組件,利于以后能快速開發各種小程序應用。目前發現picker的selector模式只有一級下拉,那么我們是否可以通過3個picker來實現三級聯動模板的形式來引入其它頁面中呢?答案是肯定可以的。那么我的思路是這樣的:

 

1、使用template模板語法進行封裝,數據從頁面傳入

2、根據picker組件的語法,range只能是一組中文地區數組,但是我們需要每個地區的唯一碼來觸發下一級聯動數據。這樣,我的做法是通過一個對象里面的兩組數據分表存儲中文名和唯一碼的兩個對象數組。格式【province:{code:['110000', '220000'...], name: ['北京市', '天津市'...]}】,這個格式是固定的,需要服務端配合返回

3、通過picker的bindchange事件來獲取下一級的數據,每個方法都寫入函數中在暴露出來供頁面調用

 

然后講下我demo的目錄結構:

common

    -net.js//wx.request請求接口二次整合

    -cityTemplate.js//三級聯動方法

page

    -demo

        -demo.js

        -demo.wxml

template

    -cityTemplate.wxml

app.js

app.json

app.wxss

 

然后,使用phpstudy搭建了簡單的服務端供測試。不要問我服務端的為啥是這樣的,我也不懂,剛入門我只要數據...

當然你可以省掉這一步,將數據直接固定在demo.js里面進行測試...

代碼如下:【服務端的返回數據格式是遵循了下面的retArr的規范的】

 

[php] view plain
  1. <?php  
  2. header("Content-type: text/html; charset=utf-8");   
  3.   
  4. $type=$_REQUEST["type"];//獲取省市區的標志  
  5. $fcode=$_GET["fcode"];  
  6.   
  7. $retArr=[  
  8.     "status"=>true,  
  9.     "data"=>[],  
  10.     "msg"=>""  
  11. ];&


易優小程序(企業版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/23129.html 復制鏈接 如需定制請聯系易優客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×