//index.wxml

1. <view class="phone_one" bindtap="clickPerson">
2. <view class="phone_personal">{{firstPerson}}</view>
3. <image src="../../image/v6.png" class="personal_image {{selectArea ? 'rotateRight' :''}}"></image> //三目法判斷圖片要不要旋轉(zhuǎn)180。
4. </view>
5.  
6. <view class="person_box">
7. <view class="phone_select" hidden="{{selectPerson}}">
8. <view bindtap="mySelect">測(cè)試1</view>
9. <view bindtap="mySelect">測(cè)試2</view>
10. <view bindtap="mySelect">測(cè)試3</view>
11. </view>
12. </view>

//index.js

1. <pre name="code" class="html">Page({
2. data:{
3. selectPerson:true,
4. firstPerson:'個(gè)人',
5. selectArea:false,
6. },
7. //點(diǎn)擊選擇類型
8. clickPerson:function(){
9. var selectPerson = this.data.selectPerson;
10. if(selectPerson == true){
11. this.setData({
12. selectArea:true,
13. selectPerson:false,
14. })
15. }else{
16. this.setData({
17. selectArea:false,
18. selectPerson:true,
19. })
20. }
21. } ,
22. //點(diǎn)擊切換
23. mySelect:function(e){
24. this.setData({
25. firstPerson:e.target.dataset.me,
26. selectPerson:true,
27. selectArea:false,
28. })
29. },
30. }}</pre><pre name="code" class="html"></pre>//index.wxss
31. [html] view plain copy
32. <pre name="code" class="html">.phone_personal{
33. width: 100%;
34. color:rgb(34, 154, 181);
35. height:100rpx;
36. line-height:100rpx;
37. text-align: center;
38. }
39. .phone_one{
40. display: flex; //用flex布局更方便。
41. position: relative;
42. justify-content: space-between;
43. background-color:rgb(239, 239, 239);
44. width:90%;
45. height:100rpx;
46. margin:0 auto;
47. border-radius: 10rpx;
48. border-bottom:2rpx solid rgb(255, 255, 255);
49. }
50. .person_box{
51. position: relative;
52. }
53. .phone_select{
54. margin-top:0;
55. z-index: 100;
56. position: absolute; //小程序中z-index和absolute需要同時(shí)存在，元素才能脫離文檔。
57. }
58. .select_one{
59. text-align: center;
60. background-color:rgb(239, 239, 239);
61. width:676rpx; //脫離文檔后元素width不能再用百分比。
62. height:100rpx;
63. line-height:100rpx;
64. margin:0 5%;
65. border-bottom:2rpx solid rgb(255, 255, 255);
66. }
67. .personal_image{
68. z-index: 100;
69. position: absolute;
70. right:2.5%;
71. width: 34rpx;
72. height: 20rpx;
73. margin:40rpx 20rpx 40rpx 0;
74. transition: All 0.4s ease;
75. -webkit-transition: All 0.4s ease;
76. }
77. .rotateRight{
78. transform: rotate(180deg); //180°旋轉(zhuǎn)圖片。
79. }</pre>
80. <p></p><pre name="code" class="html" style="font-size: 13.3333px;"></pre><p></p>
81. <pre></pre>