demo 地址: https://github.com/iotjin/Jh_weapp

效果图：

JhDropDownMenu.gif

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方式：

image.png

Component({
  /**
   * 组件的属性列表
   */
  properties: {
  externalClasses: ['menu-bg', 'menu-content'], //不能使用小驼峰命名，只能用 -或 _
  array: { //模型数组
      type: Array,
    },
    index: { //选中索引，默认0
      type: 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;
}