小程序模板網

碼云推薦 | 微信小程序的省市選擇組件 citySelector

發(fā)布時間:2018-05-04 16:05 所屬欄目:小程序開發(fā)教程

省份/城市/區(qū)縣定位選擇器

:dash::rocket: 微信小程序,一行代碼引入的省份/城市/區(qū)縣定位選擇器的庫

主要功能

  • 自動定位 城市、區(qū)縣(也支持手動重新定位)
  • 手動 漢字、拼音搜索 城市,支持搜索數(shù)量335個,覆蓋地級市
  • 亦可通過 側邊欄 選擇,城市按拼音首字母排列
  • 選擇好城市后,自動顯示 轄下區(qū)縣

集成說明

  • 將libs文件夾拷貝至您的小程序項目根目錄
  • 在您的項目根目錄 app.json 里的 pages 數(shù)組里增加一行 "libs/citySelector/switchcity/switchcity"
  • 打開項目里的 /libs/citySelector/config.default.js 文件
  • 將其中的key改為自己的騰訊地圖key(申請快速并免費) 點擊立即打開騰訊地圖Key申請頁面

快速使用

在您要打開選擇器地方用navigator組件,將url設置為 "/libs/citySelector/switchcity/switchcity"

或者,在 JS 代碼里直接使用 wx.navigateTo 打開地區(qū)選擇器

wx.navigateTo({
    url: '/libs/citySelector/switchcity/switchcity',
});

兩種方法二選一即可

獲取返回數(shù)據

在switchcity頁選擇完地區(qū)之后,點擊會自動返回,并且將省份/城市/區(qū)縣數(shù)據設置到本頁面的 this.data.address 內

如圖所示

 

修改顏色樣式
  • 在libs文件夾搜索 #c60a0d ,替換為您想要的顏色值即可

功能演示

Gif有點卡,不過實際操作起來是超級流暢的

 

如果對您有幫助,請star


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24239.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢