微信小程序组件 - 下拉菜单 可点击空白隐藏

GitHub Demo 地址:jh-weapp-demo实现一些常用效果、封装通用组件和工具类

小程序码

效果图：

demo代码：

js 代码：

Page({/*** 页面的初始数据*/data: {arrowSelectArray: [{"id": "1","text": "11"}, {"id": "2","text": "22"}]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.setNavigationBarTitle({title: 'JhDropDownMenu'})},clickItem: function (e) {console.log(e);console.log(e.detail);},})

json 代码：

{"usingComponents": {"JhDropDownMenu": "/JhTools/JhDropDownMenu/JhDropDownMenu"}}

wxml 代码：

<view class="text" >默认样式，绑定点击事件 </view><JhDropDownMenu array='{{arrowSelectArray}}' bind:clickItem='clickItem'> </JhDropDownMenu><view class="text" >设置默认选择第一个</view><JhDropDownMenu array='{{arrowSelectArray}}' index='1'></JhDropDownMenu><view class="text" >设置提示文字</view><JhDropDownMenu array='{{arrowSelectArray}}' hintText="请选择"></JhDropDownMenu><view class="text" >通过属性修改蒙版颜色</view><JhDropDownMenu array='{{arrowSelectArray}}' maskColor="rgba(0, 0, 0, .5)"></JhDropDownMenu><view class="text" >通过属性修改背景颜色</view><JhDropDownMenu array='{{arrowSelectArray}}' bgColor="red"></JhDropDownMenu><view class="text" >通过属性修改宽度</view><JhDropDownMenu array='{{arrowSelectArray}}' width="200px"></JhDropDownMenu><view class="text" >通过样式覆盖修改背景样色和宽度 </view><JhDropDownMenu array='{{arrowSelectArray}}' menu-bg="menu-bg" menu-content="menu-content"></JhDropDownMenu>

wxss 代码：

.menu-bg {width: 180px !important;}.menu-content {background: orange !important;}.text{height: 30px;margin-top: 10px;color: gray;}

添加Component方式：

Component({/*** 组件的属性列表*/properties: {externalClasses: ['menu-bg', 'menu-content'], //不能使用小驼峰命名，只能用 -或 _array: { //模型数组type: Array,},index: { //选中索引，默认0type: Number,value: 0},},/*** 组件的初始数据*/data: {isShow: false, //初始option不显示},attached: function() {// 页面创建时执行console.info('---JhDropDownMenu loaded!---')},detached: function() {// 页面销毁时执行console.info('---JhDropDownMenu unloaded!---')},/*** 组件的方法列表*/methods: {}})

外部调用组件的方式

"usingComponents": {"JhDropDownMenu": "/JhTools/JhDropDownMenu/JhDropDownMenu"}//如果覆盖样式 ，需使用important<JhDropDownMenu array='{{arrowSelectArray}}' menu-bg="menu-bg" menu-content="menu-content"></JhDropDownMenu>.menu-bg {width: 180px !important;}