在這篇文章《2018年設計趨勢指南》中發現一款菜單不錯,就想着用微信小程序實現小程序
基本flex
佈局再加個padding
不須要多講吧?微信小程序
提一下,微信小程序裏input的placeholder樣式是寫在
placeholder-style
裏或使用placeholder-class
微信
flex
佈局,設置width: 50%
,別忘了flex-wrap: wrap
flex
佈局並設置垂直居中,想了想仍是科普下:.main-view-item{
display: flex;
justify-content: center;
align-items: center;
width: 50%;
}
複製代碼
flex真他孃的好用ide
至於裏面的圖片是從iconfont上拿的,調這幾個配色的時間是我佈局時間的幾十倍....佈局
微信小程序的動畫只能用JS,常規手段不可用,來個頭腦風暴hack起來post
觀察每一個卡片的摺疊方向後,爲每一個卡片添加初始rotate
使其反向摺疊,我在這裏定義了兩個Classflex
.rotateX90{
transform: rotateX(-90deg);
}
.rotateY90{
transform: rotateY(-90deg);
}
複製代碼
好了這樣就看不到卡片了,而後給菜單按鈕添加點擊事件改變卡片的rotate(動態改變Class)就Ojbk啦,就像這樣動畫
<view class='main-view-item rotateX90 item1 {{item1Style}}' animation='{{item1}}'></view>
複製代碼
實際狀況應該用
wx:for
進行循環渲染ui
var duration = 150
var item1 = wx.createAnimation({
duration: duration,
transformOrigin: '0 0 0'
})
item1.rotateX(90).step()
this.setData({
item1: item1,
item1Style: 'item1Style'
})
複製代碼
這裏注意調整transformOrigin
來控制摺疊方向,對於後面的卡片在createAnimation
中添加delay
字段便可(差爲duration
的等差數列)this
是否是很簡單嗯?
至於菜單的收回,代碼和展開差很少,就是反過來而已,不過有些展開的順序和transformOrigin
須要注意,這裏仍是貼一個代碼吧:
var duration = 150
var item3 = wx.createAnimation({
duration: duration,
transformOrigin: '100% 100% 0',
delay: duration * 2
})
item1.rotateX(90).step()
this.setData({
item3: item3,
item3Style: ''
})
複製代碼
另外我在data
裏設置了兩個變量isShow
和isShowing
來判斷菜單是否展開或者正在展開,來控制點擊事件,差很少像這樣
handleClick(){
if(this.data.isShowing)
return;
else if(!this.data.isShow)
this.showMenu()
else
this.hideMenu()
}
複製代碼
在動畫完成後對isShow
和isShowing
進行修改便可
歡迎有更好想法的朋友進行討論~