微信小程序页面缩放式侧滑效果的实现代码
作者:站住,别跑 时间: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
标签:微信小程序,缩放,侧滑
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
详解mysql建立索引的使用办法及优缺点分析
2024-01-23 08:48:15
Python pip 安装与使用(安装、更新、删除)
2022-07-30 01:58:19
MySQL根据某一个或者多个字段查找重复数据的sql语句
2024-01-22 14:40:54
![](https://img.aspxhome.com/file/2023/0/124830_0s.png)
详解超星脚本出现乱码问题的解决方法(Python)
2022-11-21 02:40:42
![](https://img.aspxhome.com/file/2023/3/72963_0s.png)
学习ASP.NET八天入门:第四天
2007-08-07 13:40:00
![](https://img.aspxhome.com/file/UploadPic/20078/7/200787134256933s.gif)
利用Python实现获取照片位置信息
2022-12-07 06:58:16
![](https://img.aspxhome.com/file/2023/1/134641_0s.png)
Python如何爬取b站热门视频并导入Excel
2023-06-20 23:27:44
![](https://img.aspxhome.com/file/2023/0/110280_0s.png)
Python 获取指定文件夹下的目录和文件的实现
2023-12-23 22:44:29
ASP连接Oracle数据库的例子
2007-10-02 12:44:00
简单了解Django ORM常用字段类型及参数配置
2022-11-03 09:11:38
sqlserver、Mysql、Oracle三种数据库的优缺点总结
2024-01-22 10:33:56
960px下的黄金分割
2009-07-31 14:33:00
![](https://img.aspxhome.com/file/UploadPic/20097/31/498022_1248973274hhmt-19s.jpg)
Python实现npy/mat文件的保存与读取
2023-07-22 08:49:48
![](https://img.aspxhome.com/file/2023/8/83738_0s.png)
Vue+express+Socket实现聊天功能
2024-06-05 09:19:03
![](https://img.aspxhome.com/file/2023/0/123050_0s.jpg)
全兼容的纯CSS级联菜单要点浅析
2009-06-10 14:42:00
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2021-04-26 21:27:11
![](https://img.aspxhome.com/file/2023/1/110391_0s.jpg)
解析SQL Server中datetimeset转换datetime类型问题
2024-01-15 13:22:34
![](https://img.aspxhome.com/file/2023/7/108537_0s.png)
JS:window.onload的使用介绍
2024-04-23 09:12:47
Python下的Softmax回归函数的实现方法(推荐)
2022-02-13 10:42:17
![](https://img.aspxhome.com/file/2023/0/66320_0s.jpg)
MySQL无法存储Emoji表情问题的解决方法分析
2024-01-22 00:32:13
![](https://img.aspxhome.com/file/2023/5/112875_0s.png)