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


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 相关文章推荐
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 Javascript
vue特效之翻牌动画
Apr 20 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 得到根目录的 __FILE__ 常量
2008/07/23 PHP
PHP中的事务使用实例
2015/05/26 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
jQuery带进度条全屏图片轮播特效代码分享
2020/06/28 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
python判断端口是否打开的实现代码
2013/02/10 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
使用requests库制作Python爬虫
2018/03/25 Python
python版大富翁源代码分享
2018/11/19 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Django choices下拉列表绑定实例
2020/03/13 Python
汽车工程专业应届生求职信
2013/10/19 职场文书
销售业务员岗位职责
2014/01/29 职场文书
企业宗旨标语
2014/06/10 职场文书
2014年向国旗敬礼活动总结
2014/09/27 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
详细了解java监听器和过滤器
2021/07/09 Java/Android