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

[复制链接]
hyt_xcx手机认证 实名认证 视频认证 发表于 2016-12-11 17:23:25 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
本文辅助教程地址http://www.wxapp-union.com/portal.php?mod=view&aid=619

实例图片:
2.gif

3.gif

4.gif

5.gif

6.gif

11111.gif

  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.     this.data.mark = this.data.newmark;
  70.    
  71.   },
  72.   tap_end: function(e){
  73.     if(this.data.staus == 1 && this.data.startmark < this.data.newmark){
  74.       if(Math.abs(this.data.newmark - this.data.startmark) < (this.data.windowWidth*0.2)){
  75.         this.setData({
  76.             translate: 'transform: translateX(0px)'
  77.         })
  78.         this.data.staus = 1;
  79.       }else{
  80.         this.setData({
  81.             translate: 'transform: translateX('+this.data.windowWidth*0.75+'px)'
  82.         })
  83.         this.data.staus = 2;
  84.       }
  85.     }else{
  86.       if(Math.abs(this.data.newmark - this.data.startmark) < (this.data.windowWidth*0.2)){
  87.         this.setData({
  88.             translate: 'transform: translateX('+this.data.windowWidth*0.75+'px)'
  89.         })
  90.         this.data.staus = 2;
  91.       }else{
  92.         this.setData({
  93.             translate: 'transform: translateX(0px)'
  94.         })
  95.         this.data.staus = 1;
  96.       }     
  97.     }

  98.     this.data.mark = 0;
  99.     this.data.newmark = 0;
  100.   }
  101. })
复制代码
项目地址:
游客,如果您要查看本帖隐藏内容请回复










回复

使用道具 举报

精彩评论1

张波 发表于 2017-2-22 17:10:11 | 显示全部楼层
啥也不说了,感谢楼主分享哇!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

专注源码分享,教程分享
全国服务电话

187-8198-7163

周一至周8:00-22:00

反馈建议

cdhaoyt@163.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.( 蜀ICP备16032957号-1