入坑微信小程序必经之路（一） Select下拉框组件

原始的html中select下拉框是这样的

<select>
  <option value='Id'>name</option>
</select>

但微信小程序不同，如果你这么在微信小程序中定义，那璀璨的红线条会告诉你花儿为什么那么红

微信小程序是没有select标签的，我们需要自己定义select组件才行

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109

<view class="pro-section">         <text class="sect-title">类型:</text>         <view class="weui-cell__bd">          <view class='list-msg2' bindtap='bindShowMsg'>            <text >{{tihuoWay}}</text>          </view>         </view>     </view>     <view class="select_box" wx:if="{{select}}">         <view class="select_one" bindtap="mySelect" data-name="1">西瓜</view>         <view class="select_one" bindtap="mySelect" data-name="2">黄瓜</view>         <view class="select_one" bindtap="mySelect" data-name="3">南瓜</view>         <view class="select_one" bindtap="mySelect" data-name="0">丝瓜</view>     </view>.select_one {     height: 60rpx;     line-height: 60rpx;     border-bottom: 1px solid #ccc; } .pro-head{   background-color: white;   border-bottom: 1rpx solid #eeeeee;   padding: 20rpx 40rpx;   }       .center-image{    display: flex;    align-items: center;/*垂直居中*/     justify-content: center;/*水平居中*/     height: auto;   }       swiper{       background-color: white;       min-height:600rpx;   }       .pro-title{       font-size: 13pt;       font-weight: bold;       color: #666;        }       .pro-price{        display: flex;        padding:  20rpx 0;   }   .pro-real-t{       font-size:11pt;       line-height: 18pt;   }       .pro-real-l{       font-size:9pt;       line-height: 18pt;   }   .pro-real-m{       font-size:18pt;       color: #ff7701;   }       .pro-old-t{       font-size:12pt;       line-height:23pt;       }   .pro-old-l{       font-size:9pt;       line-height: 18pt;   }   .pro-old-m{       font-size:15pt;       line-height: 18pt;   }   swiper {       padding: 40rpx 0;   }       .pro-section{       position: relative;       padding: 20rpx 40rpx;       overflow: hidden;       border-top: 1rpx #cccccc solid;   }   .sect-title{       float:left;       font-size:12pt;       display:inline-block;       margin-right:15rpx;       line-height: 2;   } data{ select:'false', tihuoWay:'', },   ---------------------------------------------------- bindShowMsg() {   this.setData({       select:!this.data.select   }) }, ----------------------------------------------------- mySelect(e) {  var name = e.currentTarget.dataset.name  this.setData({      tihuoWay: name,      select: false,  })<br>},

　　上面就是我定义的select组件,下面是WXSS样式

    bindtap就是点击事件

　　下方是js

　　

大佬们加油