小程序下拉框制作

1、先上一波效果图：

20190910_141145.gif

2、wxml代码：

<view class='content' bindtap='pullEvent'>
    <view class='contentOne'>{{funC}}</view>
    <view class='iconfont icon-pullDown contentTwo' ></view>
    <view class='selectBox' wx:if="{{select}}">
      <view class='box' style="height:{{winHeight*140/1206}}rpx">
        <view class='selectOne' catchtap='mySelect' data-name='住宅'>住宅</view>
        <view class='selectOne' catchtap='mySelect' data-name='商铺'>商铺</view>
        <view class='selectOne selectRight' catchtap='mySelect' data-name='工业厂房'>工业厂房</view>
      </view>
    </view>
</view>

3、js代码：

 /**
   * 页面的初始数据
   */
  data: {
    label:'iconfontsousuo icon-sousuo label',
    labelData:"请输入搜索内容",
    deleteIcon:'',
    changeValue:'',
    select:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR;
        that.setData({
          winHeight: calc
        });
      }
    })
    var funC = options.funC;
    //设置导航栏的标题
    wx.setNavigationBarTitle({
      title: funC
    });
    this.setData ({
      funC:funC
    });
  },
//下拉框事件
  mySelect(e) {
    var funC = e.currentTarget.dataset.name;
    this.setData({
      select:false,
      funC:funC
    })
    //修改导航栏标题
    wx.setNavigationBarTitle({
      title: funC,
    })
  },
  //下拉触发按钮
  pullEvent(e) {
    this.setData({
      select:true
    })
  },

4、wxss代码：

.content {
  flex:2;
  display:flex;
  position:relative;
  cursor: pointer;

}
.selectBox {
  position:absolute;
  font-size:30rpx;
  top:85%;
  left:0%;
  width:101%;
  background-color:#0073e1;
  color:white;
}
.box {
  display:flex;
  flex-direction:column;
}
.selectOne {
  padding-left:23%;
  margin:0 6%;
  border-bottom: 1px solid #aeaeae;
  text-align: center;
  flex:1;
}
.selectRight {
  padding-left:16%;
}

.contentOne {
  flex:2;
  color:white;
  font-size:30rpx;
  /* 弹性居中 */
  display:flex;
  justify-content:flex-end;
  align-items: center;
}
.contentTwo,.search {
  display:flex;
  justify-content:flex-end;
  align-items: center;
}