微信小程序下拉菜單自定義組件

介紹

針對於微信小程序作了個下拉菜單的自定義組件,樣式以下~git

主要包括如下兩種類型github

  • 級聯選擇器,例如xx區-xx街道
  • 下拉列表,例如排序,篩選等

Feb-16-2019 01-05-24.gif

image.png

image.png

使用

具體使用方式參照index.wxml示例
  • 支持動態修改Navgation上的Item數量和顯示隱藏等
/*
dropDownMenuTitle:導航標題數組,按順序填寫
dropDownMenuDistrictData:區域數組
--- 如下三種樣式同樣,按需求添加便可 ---
dropDownMenuSourceData:來源
dropDownMenuStyleData:租售
dropDownMenuFilterData:排序
*/
<dropdownmenu dropDownMenuTitle='{{dropDownMenuTitle}}' dropDownMenuDistrictData='{{dropDownMenuFirstData}}' dropDownMenuSourceData='{{dropDownMenuSecondData}}' dropDownMenuStyleData='{{dropDownMenuThirdData}}' dropDownMenuFilterData='{{dropDownMenuFourthData}}'
  bind:selectedItem='selectedItem' />
複製代碼
  • 將項目中component文件夾拖入項目中
  • 在將要使用的該組件的.json文件中引入
{
  "usingComponents": {
    "dropdownmenu": "/component/dropdownmenu/dropdownmenu"
  }
}

複製代碼
  • 在.wxml文件中引用便可
github連接在最下方,詳情代碼以及使用參照示例,若是對你有所幫助的請給個Star✨~

項目地址 - https://github.com/ZBK1nger/dropDownMenu-wechatjson

相關文章
相關標籤/搜索