Method code for implementing the sliding effect of the sidebar in WeChat applet development-Mini Program Development-php.cn

Method code for implementing the sliding effect of the sidebar in WeChat applet development

高洛峰

Release： 2017-03-17 14:33:35

Original

2702 people have browsed it

Sidebar sliding is a very common function in the development of mobile applications. Of course, there is no exception in small programs. However, not long after the small programs came out, many special effects have not yet mature cases and can only be rewritten natively. So today We have collected four very beautiful sidebar special effects for everyone on the Internet~~
NO1. The sliding effect of the sidebar is as follows:

微信小程序开发中实现侧边栏的滑动效果的方法代码

where w# The code of ##xml 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>

Copy after login

Build an upper and lower two-layer interface

Write a css3 right shift

AnimationStyle.c-state1

wxss

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

Copy after login

Click the

button to add style.c-state1

Click again to remove style.c-state1

NO2. The sliding effect of the sidebar 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%);   
}

Copy after login

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:

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

Copy after login

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

NO3. The sliding effect of the sidebar is as follows: (Features: not only You 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 
      });  
    } 
}

Copy after login

Judge in tap_drag

Gesture is 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 sliding from left to right

tap_end indicates that the gesture is raised. If it is from right to left, a sliding from right to left is triggered

NO4. The sliding effect of the sidebar is as follows:

微信小程序开发中实现侧边栏的滑动效果的方法代码

This special effect will slide with the sliding gesture; if it is less than 20% of the screen width when you let go, it will automatically restore; if it exceeds 20% of the screen width when you let go, it will slide to the right~~

This The effect is very complex, we split it into multiple steps to analyze~

1) The screen moves with the gesture

. The JS code is

this.setData({ 
    translate: &#39;transform: translateX(&#39;+(this.data.newmark - this.data.startmark)+&#39;px)&#39;  
})

Copy after login

This The sentence is the key, and it is easy to understand. It is to use js to control the value of translateX on the light blue screen, so that the gesture keeps sliding left and right, and the screen slowly slides along with the gesture.

2) Bounce effect

Drag the screen less than 20% of the screen width and restore the default

state; if it exceeds 20%, slide to the far right~~

JS code:

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

Copy after login

If it is less than 20%, let translateX(0px) restore the screen; if it is greater than 20%, let tanslateX(75%) move the screen to the right to 75% of the screen.

The above is the detailed content of Method code for implementing the sliding effect of the sidebar in WeChat applet development. For more information, please follow other related articles on the PHP Chinese website!