微信小程序之自定义select下拉选项框组件

1index.wxml

<view class='com-selectBox'>
    <view class='com-sContent' bindtap='selectToggle'>
        <view class='com-sTxt'>{
  {nowText}}</view>
        <image src='../../public/img/local/down.png'  class='com-sImg'  animation="{
  {animationData}}"></image>
    </view>
    <view class='com-sList' wx:if="{
  {selectShow}}">
        <view wx:for="{
  {propArray}}" data-index="{
  {index}}" wx:key='' class='com-sItem' bindtap='setText'>{
  {item.text}}</view>
    </view>
</view>

2 index.wxss

.com-selectBox{
    width: 200px;
}
.com-sContent{
    border: 1px solid #e2e2e2;
    background: white;
    font-size: 16px;
    position: relative;
    height: 30px;
    line-height: 30px;
}
.com-sImg{
    position: absolute;
    right: 10px;
    top: 11px;
    width: 16px;
    height: 9px;
    transition: all .3s ease;
}
.com-sTxt{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding:0 20px 0 6px;
    font-size: 14px;
}
.com-sList{
    background: white;
    width: inherit;
    position: absolute;
    border: 1px solid #e2e2e2