wxml:
<view class="page">
<view class="bottom">
<view class="content">
<view class="nav">item1</view>
<view class="nav">item2</view>
<view class="nav">item3</view>
<view class="nav">item4</view>
</view>
</view>
<view class="top {{open ? 'state' : ''}}">
<image bindtap="switch"
src="/images/menu.png"></image>
</view>
</view>
wxss:
.nav{
height:100rpx
}
.state{
transform: rotate(0deg) scale(.8) translate(75%,0%);
-webkit-transform: rotate(0deg) scale(.8) translate(75%,0%);
}
js:
Page({
data:{
open : false
},
switch(e){
if(this.data.open){
this.setData({
open : false
});
}else{
this.setData({
open : true
});
}
}
})