微信小程序页面缩放式侧滑效果的实现代码


Posted in Javascript onNovember 15, 2018

先给大家展示下效果图,大家感觉不错,请参考实现代码:

微信小程序页面缩放式侧滑效果的实现代码

实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class。

由于微信小程序中不能操作page这个根节点,所以,只有用一个div(view)来模仿page根节点。

1.结构

<view class='page {{isFix?"pageShow":"pageHide"}}' >
  <view class='header'>    
    <view class='h-toggle iconfont icon-list' bindtap='pageBtn'></view>
  </view>
</view>
<view class='r-box {{isFix?"fixShow":"fixHide"}}' bindtap='fixHide'>
  <view class='r-list' catchtap='fixStopBu'>
    <view class='rl-close' catchtap='fixClose'>
      <text class='iconfont icon-close'></text>
    </view>    
  </view>
</view>

 上面的是最主要的结构,其它的内容就不贴了。

(1)  isFix是切换动画名的状态

(2)  r-box设置了bindtap点击事件之后,r-list也设置了一个不冒泡的catchtap事件,是为了实现点击r-box的空白处时,不冒泡的效果。

2.样式

page {
 height: 100%;
 width: 100%;
}
.page {
 width: 100%;
 height: 100%;
 box-shadow: 0 0 10px rgba(26,26,26,.1);
}
.r-box {
 position: fixed;
 top: 0;
 right: 0;
 width: 100%;
 height: 100%;
}
.r-box .r-list {
 float: right;
 width: 66%;
 height: 100%;
 background: white;
}
.fixHide {
 transition: all .3s ease;
 transform: translateX(100%);
}
.fixShow {
 transition: all .3s ease;
 transform: translateX(0%);
}
.pageHide {
 transition: all .3s ease;
 transform: translateX(0) scaleY(1);
}
.pageShow {
 transition: all .3s ease;
 transform: translateX(-70%) scaleY(0.9);
}

 这些是最主要的样式:

(1)  class为page的div(view),就是模拟整个page页面,所以宽高需要设为100%。

(2)  r-box是右边侧滑的div(view)

(3)  fixHide,fixShow这是侧滑栏的动画效果。

(4)  pageHide,pageShow这是整个页面的动画效果

(5)  由于transform只能出现一次,所以当有两个即以上的动画效果时,只写在一个transform里,然后把不同的动画效果分开就行。

(6)  过渡效果的速度曲线我使用的是ease,如果用linear,在手机上会感觉很卡顿。

 3.js

Page({
  data:{
   isFix:false,//右侧列表是否显示    
  },
  // 右侧列表显示按钮
  pageBtn:function(){
   this.setData({
    isFix:true
   })
  },
  //右侧列表空白点击
  fixHide:function(){
   this.setData({
    isFix: false
   })
  },
  //右侧列表防冒泡,必须有,虽然没内容
  fixStopBu: function () {},
  //右侧列表关闭按钮
  fixClose:function(){
   this.setData({
    isFix:false
   })
  },
})

 实现的过程大致就是这样。还是挺简单的。不知道用小程序的动画api做起来会不会简单一些或者更顺畅一点,这个就看自己勤不勤了。

总结

以上所述是小编给大家介绍的微信小程序页面缩放式侧滑效果的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript实现QueryString获取GET参数的方法
Jul 02 Javascript
php与js的区别是什么
Aug 05 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 #Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 #Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 #Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 #jQuery
详解ES6 Fetch API HTTP请求实用指南
Nov 14 #Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 #Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 #Javascript
You might like
PHP中的多种加密技术及代码示例解析
2016/10/20 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python中Random和Math模块学习笔记
2015/05/18 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
Python requests模块cookie实例解析
2020/04/14 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
Python eval函数介绍及用法
2020/11/09 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
为什么使用接口?
2014/08/13 面试题
商务专员岗位职责
2013/11/23 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
运动会口号16字
2014/06/07 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
代收款委托书范本
2014/10/01 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
小学运动会报道稿
2015/07/22 职场文书