//index.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 bindtap="mySelect">测试1</view>  
    <view bindtap="mySelect">测试2</view>  
    <view bindtap="mySelect">测试3</view>  
  </view>  
</view>  

//index.js

<pre name="code" class="html">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,  
  })  
 },  
}}</pre><pre name="code" class="html"></pre>//index.wxss  
[html] view plain copy
<pre name="code" class="html">.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°旋转图片。  
}</pre>  
<p></p><pre name="code" class="html" style="font-size: 13.3333px;"></pre><p></p>  
<pre></pre>