How to realize multi-fold and expand menu in Mini Program
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!
