Code for implementing the sliding effect on the sidebar in WeChat applet development

This article introduces how to implement the sliding effect of the sidebar in the development of Mini Programs. code is a common function in the development of mobile apps. of course, it is no exception in the development of mini apps, however, soon after the small program came out, many special effects have not yet been proven and can only be rewritten in the native way. so today, we collected four very beautiful sidebar special effects on the Internet ~~
The sliding of the NO1. sidebar is as follows:

The wxml code is as follows:

   
      
           
                
                     
     
      
First item1
                  
                 
                     
     
      
Second item2
                  
                 
                     
     
      
Third item3
                  
                 
                     
     
      
Fourth item4
                  
             
        
       
           
        
   
 

Build up and down two layers of interface

Write a right-shift animation style for css3. c-state1

Wxss

.c-state1{   transform: rotate(0deg) scale(1) translate(75%,0%);     -webkit-transform: rotate(0deg) scale(1) translate(75%,0%);   }

Click the button to add a style. c-state1

Click again to remove the style. c-state1

NO2. sliding of the sidebar is as follows: (features:

Slide and zoom out

)

The wxss code is as follows:

.c-state2{   transform: rotate(0deg) scale(.8) translate(75%,0%);     -webkit-transform: rotate(0deg) scale(.8) translate(75%,0%);   }

Wxml code and special effect 1 are the same

The only difference between. c-state2 and. c-state1 lies in the scale value

Js code:

Page({   data:{     open : false   },   tap_ch: function(e){     if(this.data.open){       this.setData({         open : false       });      }else{       this.setData({         open : true       });      }   } })  

The code is very simple, that is, control the class selection of view through open value

NO3. sliding of the sidebar is as follows: (feature: you can click a button to trigger the slide, you can also drag the main interface to trigger the slide effect)

The. js code is as follows:

Tap_start: function (e) {// touchstart event this. data. mark = this. data. newmark = e. touches [0]. pageX;}, tap_drag: function (e) {// touchmove event/** move your finger from left to right * @ newmark refers to the x axis coordinate of the latest point to be moved, @ mark refers to the x-axis coordinate of the origin */this. data. newmark = e. touches [0]. pageX; if (this. data. mark <this. data. newmark) {this. istoright = true;}/** move your finger from right to left * @ newmark refers to the x axis coordinate of the latest point to be moved, and @ mark refers to the x axis coordinate of the origin */if (this. data. mark> this. data. newmark) {this. istoright = false;} this. data. mark = this. data. newmark;}, tap_end: function (e) {// touchend event this. data. mark = 0; this. data. newmark = 0; if (this. istoright) {this. setData ({open: true});} else {this. setData ({open: false });}}

In tap_drag, the gesture is determined from left to right or from right to left.

Tap_end indicates that the gesture is raised. if it is left to right, the sliding from left to right is triggered.

Tap_end indicates that the gesture is raised. if it is from right to left, the sliding from right to left is triggered.

NO4. the sliding of the sidebar is as follows:

This effect slides with the gesture. if the screen width is less than 20%, the system restores automatically. if the screen width exceeds 20%, the system slides to the right ~~

This effect is very complex. we will split it into multiple steps for analysis ~

1) the screen changes with the gesture

The. JS code is

this.setData({     translate: 'transform: translateX('+(this.data.newmark - this.data.startmark)+'px)'  })

This sentence is the key and easy to understand. it is to use js to control the value of translateX on the light blue screen. in this way, the gesture keeps moving left and right, and the screen slides slowly with the gesture.

2) bullet effect

Drag the screen to restore the default status when the screen width is less than 20%. if the screen width is greater than 20%, slide to the rightmost ~~

JS code:

if(x < 20%){      this.setData({          translate: 'transform: translateX(0px)'       }) }else{      this.setData({          translate: 'transform: translateX('+this.data.windowWidth*0.75+'px)'       }) }

If the value is less than 20%, the screen will be restored when the value of translateX (0px) is greater than 20%. if the value is greater than 75%, tanslateX (75%) moves the screen to the third place on the screen right.

The above is the detailed content of the method code for implementing the sliding effect on the sidebar in applet development. For more information, see other related articles in the first PHP community!