手机版

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

时间:2021-08-28 来源:互联网 编辑:宝哥软件园 浏览:

先给大家看看效果图。每个人都感觉很好。请参考实现代码:

实现原理:点击按钮,在需要动画的div中添加或删除动画类。

由于微信小程序中无法操作页面的根节点,所以只使用一个div(视图)来模拟页面的根节点。

1.结构

view class='page {{isFix?page SHow ' : ' PageHide ' } } ' view class=' header ' view class=' h-toggle icon font icon-list ' bind tap=' PageBtn '/view/view/view class=' r-box { { IsFix?fix SHow ' : ' FixHide ' } } Bindtap=' fix id ' view class=' r-list ' catch tap=' fix stop bu ' view class=' rl-close ' catch tap=' fix close ' text class=' icon font icon-close '/text/view/view。以上是最重要的结构,其他内容不贴。

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

(2)r-box设置了bindtap点击事件后,r-list还设置了一个不冒泡的catchtap事件,以达到点击R-box空白处时不冒泡的效果。

2.风格

页面{ height : 100%;宽度: 100%;}.页面{ width : 100%;高度: 100%;box-shadow: 0 0 10px rgba(26,26,26, 1);}.r-box {位置:固定;top : 0;right : 0;宽度: 100%;高度: 100%;}.r-box。r-list { float:右侧;宽度:66%;高度: 100%;背景:白色;}.fix hide { transit : all . 3s ease;transform : translateX(100%);}.fix show { transit : all . 3s ease;transform : translateX(0%);}.page hide { transit : all . 3s ease;transform : translateX(0)Scaley(1);}.page show { transit : all . 3s ease;transform : translateX(-70%)Scaley(0.9);}主要有以下几种风格:

(class为page的div(view)模拟整个页面,因此宽度和高度应该设置为100%。

(2) r-box是右侧侧滑分区(视图)

(3) fixside,fixShow这是侧滑条的动画效果。

(4)页面侧,页面展示这是整个页面的动画效果

(5)由于变换只能出现一次,所以当有两个或两个以上的动画效果时,只在一个变换中写入,然后就可以分离出不同的动画效果。

(6)过渡效果的速度曲线我用轻松。如果我使用线性,我会觉得我的手机跑得很慢。

3.js

page({ data : { is fix e 3360 false,//是否显示右列表},//右列表显示按钮pagebtn3360 function () {this。setdata ({isfixe3360 true})},//单击fixhide:function () {this。右侧空白列表中的setdata ({isfixe3360failure})。//右边的列表是反冒泡的,必须有,虽然没有content fixtopbu 3360 function(){ }。//列表关闭按钮fixclose:function () {this。右侧的setdata ({isfixe3360failure})},})大致是这样的。很简单。不知道小程序的动画api用起来会不会更轻松流畅,就看你是否勤奋了。

摘要

以上是边肖介绍的微信小程序缩放侧滑效果的实现代码,对大家有帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!

版权声明:微信小程序页面缩放侧滑效果实现代码是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。