<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>

.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°旋轉圖片。}

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