微信小程序下拉框

番茄西紅柿發(fā)布于2019-04-23 13:13 / 3076人閱讀

摘要：微信小程序組件里沒(méi)有下拉框，正好要用到，記下來(lái)以后參考代碼選擇接收班級(jí)下拉框下拉需要顯示的列表代碼頂部下拉框下拉內(nèi)容下拉過(guò)度效果下拉圖標(biāo)代碼頁(yè)面的初始數(shù)據(jù)請(qǐng)選擇猛犸機(jī)器人班猛犸機(jī)器人班口才班點(diǎn)擊下拉框已選下拉框效果

微信小程序組件里沒(méi)有下拉框，正好要用到，記下來(lái)以后參考

wxml代碼

<view class=top>
    <view class=top-text> 選擇接收班級(jí)view>
    
    <view class=top-selected bindtap=bindShowMsg>
      <text>{{grade_name}}text>
      <image src=/images/icon/down.png>image>
    view>
    
    <view class="select_box" wx:if="{{select}}">
      <view wx:for="{{grades}}" wx:key="unique">
        <view class="select_one" bindtap="mySelect" data-name="{{item}}">{{item}}view>
      view>
    view>
  view>

wxss代碼

/* 頂部 */
.top{
  width: 100vw;
  height: 80rpx;
  padding: 0 20rpx;
  line-height: 80rpx;
  font-size: 34rpx;
  border-bottom: 1px solid #000;
}
.top-text{
  float: left
}
/* 下拉框 */
.top-selected{
    width: 50%;
    display: flex;
    float: right;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
    padding: 0 10rpx;
    font-size: 30rpx;
}
/* 下拉內(nèi)容 */
.select_box {
    background-color: #fff;
    padding: 0 20rpx;
    width: 50%;
    float: right;
    position: relative;
    right: 0;
    z-index: 1;
    overflow: hidden;
    text-align: left;
    animation: myfirst 0.5s;
    font-size: 30rpx;
}
.select_one {
    padding-left: 20rpx;
    width: 100%;
    height: 60rpx;
    position: relative;
    line-height: 60rpx;
    border-bottom: 1px solid #ccc;
}
/* 下拉過(guò)度效果 */
@keyframes myfirst {
    from {
        height: 0rpx;
    }
 
    to {
        height: 210rpx;
    }
}
/* 下拉圖標(biāo) */
.top-selected image{
  height:50rpx;
  width:50rpx;
  position: absolute;
  right: 0rpx;
  top: 20rpx;
}

js代碼

 /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    select:false,
    grade_name:--請(qǐng)選擇--,
    grades: [
        猛犸機(jī)器人1班,
        猛犸機(jī)器人2班,
        口才1班,
      ]
  },/**
 *  點(diǎn)擊下拉框
 */
  bindShowMsg() {
    this.setData({
      select: !this.data.select
    })
  },
/**
 * 已選下拉框
 */
  mySelect(e) {
    console.log(e)
    var name = e.currentTarget.dataset.name
    this.setData({
      grade_name: name,
      select: false
    })
  },