Detailed explanation of how to achieve the sidebar sliding effect in WeChat applet development

Abstract: Sidebar sliding is a very common function in the development of mobile applications. Of course, it is no exception in small programs. However, small programs have not been around for a long time, and many special effects have not yet been matured. It can only be rewritten natively, so today I have collected and compiled four very beautiful sidebar special effects for you online~~ NO1. Sidebar sliding...

In the development of mobile applications, sidebar sliding is a very common function, of course in small There are no exceptions in programs, but not long after the mini program came out, many special effects have not yet been matured and can only be rewritten natively, so today I have collected and compiled four very Beautiful sidebar special effects~~
##NO1.Sidebar slidingThe rendering is as follows:
The wxml code is as follows:

<!--page/one/index.wxml-->  
<view class="page">  
    <view class="page-bottom">  
        <view class="page-content">  
            <view  class="wc">  
                <text>第一个item1</text>  
            </view>  
            <view  class="wc">  
                <text>第二个item2</text>  
            </view>  
            <view  class="wc">  
                <text>第三个item3</text>  
            </view>  
            <view  class="wc">  
                <text>第四个item4</text>  
            </view>  
        </view>  
    </view>  
    <view class="page-top {{open ? &#39;c-state1&#39; : &#39;&#39;}}">  
        <image bindtap="tap_ch" src="../../images/btn.png"></image>  
    </view>  
</view>

• Build an upper and lower interface

• Write a css3 right-moving animation style.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 style.c-state1

• ##Click again to remove style.c-state1

• 
  

NO2.Sliding of the sidebarThe rendering is as follows:(Features:

Sliding and the screen shrinks)

The code of wxss is as follows:

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

The wxml code is the same as the special effect one

• The only difference between

  .c-state2 and .c-state1 is the scale value

• 
  

##js code:

<span style="font-family:&quot"><span style="font-size:15px">Page({  <br/>  data:{  <br/>    open : false  <br/>  },  <br/>  tap_ch: function(e){  <br/>    if(this.data.open){  <br/>      this.setData({  <br/>        open : false  <br/>      });  <br/>    }else{  <br/>      this.setData({  <br/>        open : true  <br/>      });  <br/>    }  <br/>  }  <br/>})  </span></span>

The code is very simple, it is to control the view’s selection of classes through the open value

• 
  

  ##NO3.

Sliding sidebarThe effect picture is as follows: (Features: Not only can Click the button to trigger side sliding, and you can also drag the main interface to trigger side sliding effects）

.js code is as follows:

tap_start:function(e){  
    // touchstart事件  
    this.data.mark = this.data.newmark = e.touches[0].pageX;  
},  
tap_drag: function(e){  
    // touchmove事件  
  
    /* 
     * 手指从左向右移动 
     * @newmark是指移动的最新点的x轴坐标 ， @mark是指原点x轴坐标 
     */  
    this.data.newmark = e.touches[0].pageX;  
    if(this.data.mark < this.data.newmark){  
      this.istoright = true;  
    }  
    /* 
     * 手指从右向左移动 
     * @newmark是指移动的最新点的x轴坐标 ， @mark是指原点x轴坐标 
     */  
    if(this.data.mark > this.data.newmark){  
      this.istoright = false;  
  
    }  
    this.data.mark = this.data.newmark;  
},  
tap_end: function(e){  
    // touchend事件  
    this.data.mark = 0;  
    this.data.newmark = 0;  
    if(this.istoright){  
      this.setData({  
        open : true  
      });  
    }else{  
      this.setData({  
        open : false  
      });  
    }  
}

Judge gesture in tap_drag Is it from left to right, or from right to left

• tap_end means the gesture is raised. If it is from left to right, it triggers a slide from left to right

• tap_end means the gesture is raised. If it is from right to left, it triggers a slide from right to left.

• ##NO4.

Sliding sidebar

The effect is as follows:

##

此特效会随着手势滑动而滑动；如果松手时候不到屏宽的20%，那么会自动还原；如果松手时候超过20%，那么会向右滑动~~

此效果很复杂，我们将其拆分为多个步骤来分析~

1）屏幕随着手势动而动

.JS的代码是

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

这句是关键，很好理解，就是用js控制浅蓝色屏幕translateX的值，这样手势不断左右滑动，屏幕也就跟着手势慢慢滑动了。

2）弹动效果

拖动屏幕不足屏宽20%，还原默认状态；超过20%，滑动到最右侧~~

JS代码：

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

小于20%，让translateX(0px)则屏幕还原；大于20%，tanslateX(75%)则屏幕右移到屏幕的75%处。

The above is the detailed content of Detailed explanation of how to achieve the sidebar sliding effect in WeChat applet development. For more information, please follow other related articles on the PHP Chinese website!