介紹
針對(duì)于微信小程序做了個(gè)下拉菜單的自定義組件,樣式如下~
主要包括以下兩種類型
- 級(jí)聯(lián)選擇器,例如xx區(qū)-xx街道
- 下拉列表,例如排序嘁傀,篩選等
Feb-16-2019 01-05-24.gif
image.png
image.png
使用
具體使用方式參照index.wxml示例
- 支持動(dòng)態(tài)修改Navgation上的Item數(shù)量和顯示隱藏等
/*
dropDownMenuTitle:導(dǎo)航標(biāo)題數(shù)組,按順序填寫(xiě)
dropDownMenuDistrictData:區(qū)域數(shù)組
--- 以下三種樣式一樣视粮,按需求添加即可 ---
dropDownMenuSourceData:來(lái)源
dropDownMenuStyleData:租售
dropDownMenuFilterData:排序
*/
<dropdownmenu dropDownMenuTitle='{{dropDownMenuTitle}}' dropDownMenuDistrictData='{{dropDownMenuFirstData}}' dropDownMenuSourceData='{{dropDownMenuSecondData}}' dropDownMenuStyleData='{{dropDownMenuThirdData}}' dropDownMenuFilterData='{{dropDownMenuFourthData}}'
bind:selectedItem='selectedItem' />
- 將項(xiàng)目中component文件夾拖入項(xiàng)目中
- 在將要使用的該組件的.json文件中引入
{
"usingComponents": {
"dropdownmenu": "/component/dropdownmenu/dropdownmenu"
}
}
- 在.wxml文件中引用即可
github鏈接在最下方细办,詳情代碼以及使用參照示例,如果對(duì)你有所幫助的請(qǐng)給個(gè)Star?~
項(xiàng)目地址 - https://github.com/ZBK1nger/dropDownMenu-wechat