Details about menu examples of custom drawers in WeChat applets

This article mainly introduces in detail the effects of customized drawer menus in small program practice, which has a certain reference value, if you are interested, please refer to this article for details about the menu effects of customized drawers in the practice of small programs. it has some reference value. if you are interested, please refer

Provided the animation api, which is the following:

  
 
  
Button
  
  
  
  
  
   
    
    
   
    
Menu 1
     
   
    
Menu 2
     
   
    
Menu 3
     
   
    
Menu 4
     
   
    
Menu 5
     
   
 

Wxss:

/*button*/ .btn {  width: 80%;  padding: 20rpx 0;  border-radius: 10rpx;  text-align: center;  margin: 40rpx 10%;  background: #0C1939;  color: #fff; } /*mask*/ .drawer_screen {  width: 100%;  height: 100%;  position: fixed;  top: 0;  left: 0;  z-index: 1000;  background: #000;  opacity: 0.2;  overflow: hidden; } /*content*/ .drawer_attr_box {  width: 100%;  overflow: hidden;  position: fixed;  bottom: 0;  left: 0;  z-index: 1001;  background: #fff; } .drawer_content {  padding: 20rpx 40rpx;  height: 470rpx;  overflow-y: scroll; } .drawer_title{  padding:20rpx;  font:42rpx "microsoft yahei";  text-align: center; } .line{  border-bottom: 1px solid #f8f8f8; }

Js:

Page ({data: {showModalStatus: false}, powerDrawer: function (e) {var currentStatu = e. currentTarget. dataset. statu; this. util (currentStatu)}, util: function (currentStatu) {/* animation Part * // Step 2: create an animation instance var animation = wx. createAnimation ({duration: 200, // Animation duration timingFunction: "linear", // linear delay: 0 // 0 without latency}); // Step 1: this animation instance is assigned to the current animation instance this. animation = animation; // Step 4: execute the first animation: After the y axis offset is 240px (the box height is 240px), stop the animation. translate( 240 ). step (); // step 2: export the animation object to save this. setData ({animationData: animation. export ()}) // Step 2: After the timer is set to the specified time, execute the second animation setTimeout (function () {// execute the second animation: the y axis is not offset, stop the animation. translateY (0 ). step () // The first group of animations stored for the data object. this is the animation object after the second group of animations is executed. setData ({animationData: animation}) // close the drawer if (currentStatu = "close") {this. setData ({showModalStatus: false });}}. bind (this), 200) // Display drawer if (currentStatu = "open") {this. setData ({showModalStatus: true });}}})

The above is a detailed description of the user-defined drawer menu examples of mini programs. For more information, see other related articles in the first PHP community!