小程序侧边栏滑动特效；四种特效

本文辅助教程地址http://www.wxapp-union.com/portal.php?mod=view&aid=619

实例图片：

1. // page/one/index.js
   
2. Page({
   
3.   data:{
   
4.     open : false,
   
5.     mark: 0,
   
6.     newmark: 0,
   
7.     startmark: 0,
   
8.     endmark: 0,
   
9.     windowWidth:  wx.getSystemInfoSync().windowWidth,
   
10.     staus: 1,
    
11.     translate: ''
    
12.   },
    
13.   tap_ch: function(e){
    
14.     if(this.data.open){
    
15.       this.setData({
    
16.           translate: 'transform: translateX(0px)'
    
17.       })
    
18.       this.data.open = false;
    
19.     }else{
    
20.       this.setData({
    
21.           translate: 'transform: translateX('+this.data.windowWidth*0.75+'px)'
    
22.       })
    
23.       this.data.open = true;
    
24.     }
    
25.   },
    
26.   tap_start:function(e){
    
27.     this.data.mark = this.data.newmark = e.touches[0].pageX;
    
28.     if(this.data.staus == 1){
    
29.       // staus = 1指默认状态
    
30.       this.data.startmark = e.touches[0].pageX;
    
31.     }else{
    
32.       // staus = 2指屏幕滑动到右边的状态
    
33.       this.data.startmark = e.touches[0].pageX;
    
34.     }
    
35.      
    
36.   },
    
37.   tap_drag: function(e){
    
38.     /*
    
39.      * 手指从左向右移动
    
40.      * @newmark是指移动的最新点的x轴坐标 ， @mark是指原点x轴坐标
    
41.      */
    
42.     this.data.newmark = e.touches[0].pageX;
    
43.     if(this.data.mark < this.data.newmark ){
    
44.       if(this.data.staus == 1){
    
45.         if(this.data.windowWidth*0.75 > Math.abs(this.data.newmark - this.data.startmark)){
    
46.           this.setData({
    
47.             translate: 'transform: translateX('+(this.data.newmark - this.data.startmark)+'px)'
    
48.           })
    
49.         }
    
50.       }
    
51.       
    
52.     }
    
53.     /*
    
54.      * 手指从右向左移动
    
55.      * @newmark是指移动的最新点的x轴坐标 ， @mark是指原点x轴坐标
    
56.      */
    
57.     if(this.data.mark > this.data.newmark  ){
    
58.         if(this.data.staus == 1 && (this.data.newmark - this.data.startmark) > 0){
    
59.           this.setData({
    
60.             translate: 'transform: translateX('+(this.data.newmark - this.data.startmark)+'px)'
    
61.           })
    
62.         }else if(this.data.staus == 2 && this.data.startmark - this.data.newmark < this.data.windowWidth*0.75){
    
63.           this.setData({
    
64.             translate: 'transform: translateX('+(this.data.newmark + this.data.windowWidth*0.75  - this.data.startmark)+'px)'
    
65.           })
    
66.         }
    
67.          
    
68.     }
    
69. 
    
70.     this.data.mark = this.data.newmark;
    
71.    
    
72.   },
    
73.   tap_end: function(e){
    
74.     if(this.data.staus == 1 && this.data.startmark < this.data.newmark){
    
75.       if(Math.abs(this.data.newmark - this.data.startmark) < (this.data.windowWidth*0.2)){
    
76.         this.setData({
    
77.             translate: 'transform: translateX(0px)'
    
78.         })
    
79.         this.data.staus = 1;
    
80.       }else{
    
81.         this.setData({
    
82.             translate: 'transform: translateX('+this.data.windowWidth*0.75+'px)'
    
83.         })
    
84.         this.data.staus = 2;
    
85.       }
    
86.     }else{
    
87.       if(Math.abs(this.data.newmark - this.data.startmark) < (this.data.windowWidth*0.2)){
    
88.         this.setData({
    
89.             translate: 'transform: translateX('+this.data.windowWidth*0.75+'px)'
    
90.         })
    
91.         this.data.staus = 2;
    
92.       }else{
    
93.         this.setData({
    
94.             translate: 'transform: translateX(0px)'
    
95.         })
    
96.         this.data.staus = 1;
    
97.       }     
    
98.     }
    
99. 
    
100.     this.data.mark = 0;
     
101.     this.data.newmark = 0;
     
102.   }
     
103. })

复制代码

项目地址：

游客，如果您要查看本帖隐藏内容请回复

啥也不说了，感谢楼主分享哇！