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


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的一个扩展form序列化到json对象
Dec 09 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
javascript之Partial Application学习
Jan 10 Javascript
javascript计时器详解
Feb 28 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
详解Node.js串行化流程控制
May 04 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
JavaScript中10个Reduce常用场景技巧
Jun 21 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中使用Oracle数据库(2)
2006/10/09 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
2015/11/25 Javascript
js评分组件使用详解
2017/06/06 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
2018/10/18 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
vue.js中导出Excel表格的案例分析
2019/06/11 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
python读取二进制mnist实例详解
2017/05/31 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
NumPy中的维度Axis详解
2019/11/26 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
PHP如何调用MYSQL存储过程
2014/05/30 面试题
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
学校政风行风整改方案
2014/10/25 职场文书
微信小程序调用python模型
2022/04/21 Python
浅谈Redis的事件驱动模型
2022/05/30 Redis