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


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 相关文章推荐
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
js简单倒计时实现代码
Apr 30 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
MockJs结合json-server模拟后台数据
Aug 26 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
DC动漫人物排行
2020/03/03 欧美动漫
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
JQuery基础语法小结
2015/02/27 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
Angular工具方法学习
2016/12/26 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
Java如何读取CLOB字段
2013/10/10 面试题
我的梦想演讲稿
2014/04/30 职场文书
企业管理标语
2014/06/10 职场文书
电影雷锋观后感
2015/06/10 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers