微信小程序侧边栏滑动特效(左右滑动)


Posted in Javascript onJanuary 23, 2017

侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~

侧边栏特效一

先看效果:

微信小程序侧边栏滑动特效(左右滑动)

wxml:

<!--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 ? 'c-state1' : ''}}"> 
  <image bindtap="tap_ch" src="../../images/btn.png"></image> 
 </view> 
</view>

搭建上下两层界面

写一段css3的右移动画样式 .c-state1

wxss:

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

点击按钮,添加样式.c-state1

再点击,移除样式.c-state1

侧边栏特效二

先看效果:

微信小程序侧边栏滑动特效(左右滑动)

滑动且屏幕缩小

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代码和特效一相同

.c-state2与.c-state1唯一不同在于scale值

js代码:

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

代码很简单,就是通过open值控制view对类的选取

侧边栏特效三

先看效果:

微信小程序侧边栏滑动特效(左右滑动)

与特效二不同在于,不仅可以点击按钮触发侧滑,还可以拖动主界面触发侧滑特效

js代码:

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

tap_drag中判断手势是从左到右,或者从右向左

tap_end表示手势抬起,如果是从左到右,则触发从左到右的滑动

tap_end表示手势抬起,如果是从右到左,则触发从右到左的滑动

侧边栏特效四

先看效果:

微信小程序侧边栏滑动特效(左右滑动)

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

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

1)屏幕随着手势动而动

先看效果:

微信小程序侧边栏滑动特效(左右滑动)

JS代码:

this.setData({ 
 translate: 'transform: translateX('+(this.data.newmark - this.data.startmark)+'px)' 
}) 
[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
this.setData({ 
 translate: 'transform: translateX('+(this.data.newmark - this.data.startmark)+'px)' 
})

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

2)弹动效果

先看效果:

微信小程序侧边栏滑动特效(左右滑动)

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

JS代码:

if(x < 20%){ 
  this.setData({ 
   translate: 'transform: translateX(0px)' 
  }) 
}else{ 
  this.setData({ 
   translate: 'transform: translateX('+this.data.windowWidth*0.75+'px)' 
  }) 
} 
[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
if(x < 20%){ 
  this.setData({ 
   translate: 'transform: translateX(0px)' 
  }) 
}else{ 
  this.setData({ 
   translate: 'transform: translateX('+this.data.windowWidth*0.75+'px)' 
  }) 
}

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

Javascript 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
Prototype源码浅析 String部分(二)
Jan 16 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
js生成随机数方法和实例
Jan 17 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
vue实现简单图片上传
Jun 30 Javascript
JavaScript实现无限轮播效果
Nov 19 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 #Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 #Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 #Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 #Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 #Javascript
jQuery弹出层插件popShow用法示例
Jan 23 #Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 #Javascript
You might like
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python使用剪切板的方法
2017/06/06 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
2014庆六一活动方案
2014/03/02 职场文书
毕业晚会主持词
2014/03/24 职场文书
节能环保口号
2014/06/12 职场文书
植树造林的宣传标语
2014/06/23 职场文书
庆七一活动总结
2014/08/27 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
2014年度党员自我评议
2014/09/13 职场文书
家庭困难证明
2014/10/12 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
一般纳税人申请报告
2015/05/18 职场文书
详解Golang如何优雅的终止一个服务
2022/03/21 Golang