小程序模板網(wǎng)

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

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

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

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

主要功能

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

集成說(shuō)明

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

快速使用

在您要打開(kāi)選擇器地方用navigator組件,將url設(shè)置為 "/libs/citySelector/switchcity/switchcity"

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

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

兩種方法二選一即可

獲取返回?cái)?shù)據(jù)

在switchcity頁(yè)選擇完地區(qū)之后,點(diǎn)擊會(huì)自動(dòng)返回,并且將省份/城市/區(qū)縣數(shù)據(jù)設(shè)置到本頁(yè)面的 this.data.address 內(nèi)

如圖所示

 

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

功能演示

Gif有點(diǎn)卡,不過(guò)實(shí)際操作起來(lái)是超級(jí)流暢的

 

如果對(duì)您有幫助,請(qǐng)star


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://m.u-renovate.com/wxmini/doc/course/24239.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線(xiàn)咨詢(xún)
AI智能客服 ×