Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to fold and expand menus in Mini Program". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's ideas slowly and deeply. Let's study and learn how Mini Program can achieve multi-fold and expand menus.

Mini Program to achieve multi-fold expansion menu effect display:

Get to the point.

Upper Nav

There is no need to say more about the basic flex layout plus a padding.

To mention, the placeholder style of input in WeChat Mini Programs is written in placeholder-style or uses placeholder-class.

Menu below

Each card follows the flex layout, set width: 50%, don't forget flex-wrap: wrap

Each small card has the same flex layout and vertical center. After thinking about it, it is still under popular science:

.main-view-item {

Display: flex

Justify-content: center

Align-items: center

Width: 50%

}

Animation

WeChat Mini Programs's animation can only use JS, conventional means are not available, to brainstorm hack up

After observing the folding direction of each card, add an initial rotate to each card to fold it in reverse. I define two Class here.

.rotateX90 {

Transform: rotateX (- 90deg)

}

.rotateY90 {

Transform: rotateY (- 90deg)

}

All right, so you can't see the card, and then add a click event to the menu button to change the rotate of the card and Ojbk it.

Var duration = 150

Var item1 = wx.createAnimation ({

Duration: duration

TransformOrigin: '0000'

})

Item1.rotateX (90). Step ()

This.setData ({

Item1: item1

Item1Style: 'item1Style'

})

Here, pay attention to adjust the transformOrigin to control the folding direction, for the following cards, add the delay field to the createAnimation (the difference is the isometric column of duration)

Isn't it easy, huh?

As for the menu withdrawal, the code is similar to the expansion, just the other way around, but some of the expansion order and transformOrigin need to be noted, so paste a code here:

Var duration = 150

Var item3 = wx.createAnimation ({

Duration: duration

TransformOrigin: 100% 100%

Delay: duration * 2

})

Item1.rotateX (90). Step ()

This.setData ({

Item3: item3

Item3Style:''

})

In addition, I set two variables isShow and isShowing in data to determine whether the menu is expanded or is being expanded to control the click event. I won't talk about the specific implementation here.

Thank you for your reading, the above is the content of "how to achieve multi-folding menu on Mini Program". After the study of this article, I believe you have a deeper understanding of the problem of how to achieve multi-folding menu on Mini Program. The specific use also needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.