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

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

实现原理：点击按钮，在需要动画的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用起来会不会更轻松流畅，就看你是否勤奋了。

摘要

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