微信小程序制作下拉列表

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{
    width: 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);
    width: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);
    width: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%;
    width: 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(){
    // 頁面關閉
  }
}）