微信小程序制作下拉列表

wxml代码：

  <view class="phone_one" bindtap="clickPerson">
  <view class="phone_personal">{{firstPerson}}</view>
  <image src="../../image/v6.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image> //三目法判断图片要不要旋转180。
  </view>

<view class="person_box">
   <view class="phone_select" hidden="{{selectPerson}}">
    <view class="select_one" bindtap="mySelect" data-me="你好">你好</view>
    <view class="select_one" bindtap="mySelect" data-me="他好">他好</view>
    <view class="select_one" bindtap="mySelect" data-me="大家好">大家好</view>
  </view>
 </view>

wxss代码：

.phone_personal{
     100%;
    color:rgb(34, 154, 181);
    height:100rpx;
    line-height:100rpx;
    text-align: center;
}
.phone_one{
    display: flex; //用flex布局更方便。
    position: relative;
    justify-content: space-between;
    background-color:rgb(239, 239, 239);
    90%;
    height:100rpx;
    margin:0 auto;
    border-radius: 10rpx;
    border-bottom:2rpx solid rgb(255, 255, 255);
}
.person_box{
    position: relative;
}
.phone_select{
    margin-top:0;
    z-index: 100;
    position: absolute; //小程序中z-index和absolute需要同时存在，元素才能脱离文档。
}
.select_one{
    text-align: center;
    background-color:rgb(239, 239, 239);
    676rpx;   //脱离文档后元素width不能再用百分比。
    height:100rpx;
    line-height:100rpx;
    margin:0 5%;
    border-bottom:2rpx solid rgb(255, 255, 255);
}
.personal_image{
    z-index: 100;
    position: absolute;
    right:2.5%;
     34rpx;
    height: 20rpx;
    margin:40rpx 20rpx 40rpx 0;
    transition: All 0.4s ease;   
    -webkit-transition: All 0.4s ease;
}
.rotateRight{
    transform: rotate(180deg); //180°旋转图片。
}

　　

js代码：

Page({
  data:{
    selectPerson:true,
    firstPerson:'个人',
    selectArea:false,
    },
  //点击选择类型
  clickPerson:function(){
    var selectPerson = this.data.selectPerson;
    if(selectPerson == true){
     this.setData({
     selectArea:true,
     selectPerson:false,
  })
    }else{
     this.setData({
     selectArea:false,
     selectPerson:true,
  })
    }
  } , 
  //点击切换
  mySelect:function(e){
   this.setData({
     firstPerson:e.target.dataset.me,
     selectPerson:true,
     selectArea:false,
   })
  }, 
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
}）