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


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 面向对象编程基础:封装
Aug 21 Javascript
js setattribute批量设置css样式
Nov 26 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
leaflet的开发入门教程
Nov 17 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 Javascript
详解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 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
简单了解django缓存方式及配置
2019/07/19 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
Python制作词云图代码实例
2019/09/09 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
python双向链表原理与实现方法详解
2019/12/03 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
德国网上药房:Apotal
2017/04/04 全球购物
森林防火宣传标语
2014/06/27 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
教师节感谢信
2015/01/22 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
mysql sock 文件解析及作用讲解
2022/07/15 MySQL