Body:

First, the effect picture:



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> </view> <view class="person_box"> <view class="phone_select" hidden="{{selectPerson}}"> <view Bindtap ="mySelect"> Test 1</view> <view bindtap="mySelect"> Test 2</view> </view>Copy the code
//index.js Page({data:{selectPerson:true, firstPerson:' person ', 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, }) } } , / / click switch mySelect: function (e) {enclosing setData ({firstPerson: e. arget. Dataset. Me, selectPerson: true, selectArea: false,})}, }}Copy the code

index.wxss

.phone_personal{ width: 100%; color:rgb(34, 154, 181); height:100rpx; line-height:100rpx; text-align: center; } .phone_one{ display: flex; // Flex layout is more convenient. 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; // In the applet, z-index and absolute need to exist at the same time in order for the element to leave the document. } .select_one{ text-align: center; background-color:rgb(239, 239, 239); width:676rpx; // The element width can no longer be used as a percentage after leaving the document. 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; 0.4 s help ease the transition: All; - its - the transition: All 0.4 s ease; } .rotateRight{ transform: rotate(180deg); // Rotate the image 180°. }Copy the code