微信小程序----一级选择菜单

首先，看一下真机效果图.(不知道怎么上传动态图，抱歉了，会找到的)

Wxml：

<view class="phone_one" bindtap="clickPerson">  
       <view class="phone_personal">{{firstPerson}}</view>  <!-- 三元运算判断图片要不要旋转  wxss定义 transform: rotate(90deg) -->    
        <image src="../images/jiantouyou.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image>   
</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 class="select_one" bindtap="mySelect" data-me="这是故事结尾.">这是故事结尾.</view>   </view>
</view>

Wxss：

/*下拉选择整体*/
.phone_one{    
    display: flex;     
    position: relative;    
    justify-content: space-between;   
    background-color:rgb(239, 239, 239);    
    width:676rpx;   
    height:100rpx;    
    margin:0 auto;    
    border-radius: 10rpx;    
    border-bottom:2rpx solid rgb(255, 255, 255);
}
/*下拉选择显示区域*/
.phone_personal{    
    width: 100%;    
    color:rgb(34, 154, 181);    
    height:100rpx;    
    line-height:100rpx;    
    text-align: center;
}
/*下拉选择内容*/
.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.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;
}
/*90°旋转图片*/
.rotateRight{    
    transform: rotate(90deg); 
}

Js：

Page({
  /**   
  *页面的初始数据
  * /  
    data: {    
      selectPerson: true,                 //展开下拉选择区域    
      firstPerson: '这是故事结尾.',        //默认显示内容    
      selectArea: false,                  //显示状态图标向右 
    },
    
  //点击选择类型  
  clickPerson: function(e) {    
      var selectPerson = this.data.selectPerson;    
      if(selectPerson == true){      
          this.setData({        
              selectArea: true,        
              selectPerson: false,     
          })      
          console.log("愿你所爱之人芝麻落在针眼里也爱你.")    
       }else{     
           this.setData({        
               selectArea: false,        
               selectPerson: true,      
            })    
        }  
   },
   
  //点击切换  
  mySelect: function(e) {   
       this.setData({      
           firstPerson: e.target.dataset.me,      
           selectPerson: true,      
           selectArea: false,    
       })    
       console.log("所想之人芝麻落在针眼里来到你身旁.")  
   },
})