实现点击图片旋转180度并且弹出下拉列表
//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>