微信小程序页面缩放式侧滑效果的实现代码
作者:站住,别跑 发布时间:2023-09-02 05:21:45
标签:微信小程序,缩放,侧滑
先给大家展示下效果图,大家感觉不错,请参考实现代码:
实现原理:点击按钮,往需要动画的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做起来会不会简单一些或者更顺畅一点,这个就看自己勤不勤了。
总结
以上所述是小编给大家介绍的微信小程序页面缩放式侧滑效果的实现代码,希望对大家有所帮助
来源:https://www.cnblogs.com/zjjDaily/p/8567727.html
0
投稿
猜你喜欢
- <% dim result,result1 str="ad_asp之家_nzlkjlkfjoj
- 例:公司员工采取三个轮班制度:凌晨0:00到早上8:00为第一班,早上8:00到下午4:00为第二班,下午4:00到晚上12:00为第三班。
- 关于数据库的逻辑设计,是一个很广泛的问题。本文主要针对开发应用中遇到在MS SQL Server上进行表设计时,对表的主键设计应注意的问题以
- sql server中变量要先申明后赋值:局部变量用一个@标识,全局变量用两个@(常用的全局变量一般都是已经定义好的);申明局部变量语法:d
- 前言超时,指一个协程A开启另一个协程B,A会阻塞等待B一段指定的时间,例如:5秒,A通知B结束(也有可能不通知,让B继续运行)。也就是说,A
- 一、命令格式:定义变量名称条件函数用“:”作为结尾下一级命令用空格键缩进,默认使用Tab键因为这样比较明显例如:yongHuMing = i
- 今天也碰到了el表达式无法解析的事情,于是在网上查询了下,大多说是因为web.xml中声明的版本问题于是收集了如下版本:web-app_2_
- (GlobalImport全局导入功能)默认新建立的MVC程序中,在Views目录下,新增加了一个_GlobalImport.cshtml文
- 通常,你需要获得当前日期和计算一些其他的日期,例如,你的程序可能需要判断一个月的第一天或者最后一天。你们大部分人大概都知道怎样把日期进行分割
- global 属性返回 Boolean 值,指出正则表达式使用的global 标志 (g) 的状态。默认值为 false。只读。rgExp.
- 简单的显示记录已经掌握,现在需要的就是通过ASP将信息内容插入到数据库中。一、拥有数据库cnbruce.mdb本数据库的作用就是用来 * 入数
- 本文介绍一款工具 go-callvis,它能够将 Go 代码的调用关系可视化出来,并提供了可交互式的 web 服务。go get -u gi
- 解决SQL2000最大流水号的两个好方法问:请问怎样才能解决ms serer 2000 最大流水号的问题?答:我可以介绍两种方法给你:方法1
- 本文实例分析了php字符串截取函数用法。分享给大家供大家参考。具体分析如下:php自带的截取字符串的函数只能处理英文,数字的不能截取中文混排
- 1、纯粹的截取字符串function cutstr(thestr1,strlen) dim l,t,c&nbs
- 这篇文章主要介绍了原生Java操作mysql数据库过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要
- 把你想加密的文档的源代码拷贝到下面的文本框内,按下生成按钮就可以得到一段加密了的页面代码,把代码复制到新的页面就可以了. [注意:可重复加密
- 数据库:30万条,有ID列但无主键,在要搜索的“分类”字段上建有非聚集索引过程T-SQL: /* 用户自定义函数:执行时间在115
- Dreamweaver中一直变色的超级链接,css+javascript实现超级链接变色,当鼠标移动到链接上时,链接的颜色不停闪烁变色。&l
- 编者注:当讲到了性能优化和案例方面的东西,就要想到如何从开发人员的角度进行了理解,认识SQL是如何执行,以及如何学习高级的SQL,这篇文章对