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

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

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

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

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

<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组件,下面是WXSS样式

    bindtap就是点击事件

.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;
  }

　　下方是js

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,
 })
},

　　

大佬们加油