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


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 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
常规表格多表头查询示例
Feb 21 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
vue登录注册实例详解
Sep 14 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 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
php获得文件扩展名三法
2006/11/25 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
php目录操作实例代码
2014/02/21 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
php短址转换实现方法
2015/02/25 PHP
php实现头像上传预览功能
2017/04/27 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
javascript动画浅析
2012/08/30 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
Python搜索引擎实现原理和方法
2017/11/27 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python基于递归解决背包问题详解
2019/07/03 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
英文简历中的自我评价
2013/10/06 职场文书
厨房工作人员岗位职责
2013/11/15 职场文书
员工安全生产承诺书
2014/05/22 职场文书
市场营销专业求职信
2014/06/17 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
二胎满月酒致辞
2015/07/29 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
Feign调用全局异常处理解决方案
2021/06/24 Java/Android