原始的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,
})
},
大佬们加油
