background

In this article “2018 Design Trend Guide” found a good menu, thought to use wechat mini program to achieve

Let’s start with a GIF

Began to

The top Nav

Basic Flex layout plus some padding doesn’t need to be explained, does it?

By the way, the input placeholder style in the wechat app is placeholder style or placeholder class

Below the menu

  • Each little card compliesflexLayout, setupwidth: 50%Don’t forget toflex-wrap: wrap
  • The inside of each small card is the sameflexLayout and set vertical center, think or popular science:
.main-view-item{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}
Copy the code

Flex works so damn well

As for the pictures taken from iconfont, it took me dozens of times more time to tune these colors….

animation

Micro channel small program animation can only use JS, conventional means can not be used, to brainstorm hack up

After observing the folding direction of each card, I added initial Rotate to each card to reverse fold it. I defined two classes here

.rotateX90{
  transform: rotateX(-90deg);
}
.rotateY90{
  transform: rotateY(-90deg);
}
Copy the code

So you can’t see the card anymore and add rotate to the menu button to change the card by clicking on the event and it’s Ojbk, just like that

<view class='main-view-item rotateX90 item1 {{item1Style}}' animation='{{item1}}'></view>
Copy the code

The actual situation should be looping with Wx :for

var duration = 150

var item1 = wx.createAnimation({
  duration: duration,
  transformOrigin: '0 0 0'
})

item1.rotateX(90).step()

this.setData({
  item1: item1,
  item1Style: 'item1Style'
})
Copy the code

Adjust the transformOrigin to control the folding direction by adding the delay field to createAnimation for the following cards.

Isn’t that easy?

To retrieve the menu, the code is the same as the expansion, except in reverse, but there are some expansion order and transformOrigin that need to be paid attention to.

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: ' '
})
Copy the code

I also set two variables in the data, isShow and isShowing to determine whether the menu is expanding or expanding, to control the click event, something like that

handleClick(){
  if(this.data.isShowing)
    return;
  else if(!this.data.isShow)
    this.showMenu()
  else
    this.hideMenu()
}
Copy the code

Modify isShow and isShowing after the animation is completed

Welcome friends with better ideas to discuss ~