WeChat applet sliding effect on the sidebar (sliding left and right), Applet sliding

Slide the side bar of the applet (sliding left and right) and slide the Applet

Slide on the sidebar is a common feature, but soon after the applet came out, many special effects have not yet been proven and can only be rewritten in the native mode. So today we bring you four beautiful sidebar effects ~~

Sidebar effect 1

First look at the effect:

Wxml:

<! -- Page/one/index. wxml --> <view class = "page"> <view class = "page-bottom"> <view class = "page-content"> <view class = "wc"> <text> the first item1 </text> </view> <view class = "wc"> <text> the second item2 </text> </view> <view class =" wc "> <text> third item3 </text> </view> <view class =" wc "> <text> fourth item4 </text> </view> </view> <view class = "page-top {open? 'C-state1 ': ''}}"> <image bindtap =" tap_ch "src = ".. /.. /images/btn.png "> </image> </view>

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

Sidebar effect 2

First look at the effect:

Slide and zoom out

Wxss:

.c-state2{  transform: rotate(0deg) scale(.8) translate(75%,0%);   -webkit-transform: rotate(0deg) scale(.8) translate(75%,0%);  } .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    });   }  } }) 

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

Sidebar effect 3

First look at the effect:

Different from Effect 2, you can click a button to trigger the slide. You can also drag the main interface to trigger the slide effect.

Js Code:

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 });}}

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.

Sidebar effect 4

First look at the effect:

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

First look at the effect:

JS Code:

This. setData ({translate: 'transform: translateX ('+ (this. data. newmark-this. data. startmark) + 'px) '}) [javascript] view plain copy on the CODE to view the CODE piece derived from my CODE piece 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

First look at the 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. required wwidth * 0.75 + 'px) '})} [javascript] view plain copy: view the CODE on the CODE. The CODE piece derived from my CODE piece if (x <20%) {this. setData ({translate: 'transform: translateX (0px) '})} else {this. setData ({translate: 'transform: translateX ('+ this. data. required wwidth * 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.