微信小程序实现向上滑动、向下滑动效果和点击隐藏空白功能示例

文中给出了一个例子，说明微信小程序可以实现slideUp、slideDown滑动效果和点击空白隐藏。分享给大家参考，如下：

为了在jq中实现slideUp或slideDown的动画效果，我的想法是通过使用css3的transform: translateY()属性，给要动画的元素添加一个动画类。

首先，效果图：

1.涂层的结构：

！-购物车覆盖-view class=' list-fix ' wx : if=' { { Meng show } } ' bind tap=' outtn '！- mengShow是是否显示蒙版的标志，然后将蒙版绑定到outtn-view class=' in-list { { anistyle？'的click事件slide up ' : ' slide down ' } } ' catch tap=' intn '！-这里的三元运算符是判断应该执行哪个动画。catchtap是防止冒泡的点击事件。此事件必须有，为防止冒泡-view class=' in-content ' text selected goods(1)/text text class=' icon font icon-6 '空购物车/text/view view view class=' CHO-list ' wx : for=' { { choose list } } ' wx 3360 key=' ' view class=' listName ' { item。cname } }/view view class=' ListPrice '{ { item }。cprice } }/View View class=' opBtn ' View class=' com-BTN cuts '-/View View class=' com-num ' { { item . cnum } }/View View class=' com-btnadd '/View/View/View/View注意：三元运算符中的上滑和下滑必须加引号

2.自己写覆盖层的其他样式。最重要的是上下滑动的动画效果的风格：

@个关键帧从{ transform: translateY(0)向下滑动；}到{ transform : translateY(100%)；}}.下滑{ animation:下滑0.5s线性；}.slide up { animate : slide up 0.5s线性；} @关键帧向上滑动{来自{ transform : translateY(100%)；}到{ transform : translateY(0)；}}其他风格：list-fix是固定定位，而in-list是绝对定位。

需要注意的是，在做的时候，它从Y轴的100%，也就是底部开始移动，或者从0到100%。因此需要设置z-index，从而实现当底部移动或回到100%时，即底部时，掩膜在“确认顺序”的整个结构下浮动。也就是说，“确认顺序”的整个结构的z指数大于掩码的z指数。

3.js

page({ data : { Meng Show : false，//是否显示蒙版aniStyle:true，//动画效果，默认上滑}，//在蒙版上显示Meng :功能{//这是点击事件This。整个购物车导航栏的setdata萌秀： True，//aniStyle:true//在蒙版上//将动画效果设置为slideup })}，outtn : function(e){//这是list-fix的点击事件，给它绑定事件，实现点击其他地方隐藏蒙版的效果。变量=这个；这个。setdata({ anistyle : false//将动画效果设置为slide down })settimeout(function(){//延迟设置遮罩的隐藏。这个定时器的时间是css动画中由slidedown设置的时间，这样在slidedown动画完成后蒙版就消失了。如果没有设置计时器，动画效果不会看到。setdata ({meng show : false})}，500)}，inbtn 3360 function(e){//此事件必须存在，即使什么都不做也应该写入，因为此事件是为了防止事件冒泡，这会导致click事件冒泡到列表中-当单击in-list中的元素时。Console.log('in') }，})这样就可以实现上下滑动，并点击其他地方隐藏某个元素的功能。

总结：

1.单击事件以防止冒泡：catchtap=' '

2.单击父元素以隐藏除子元素之外的父元素：父元素绑定单击隐藏事件，然后子元素绑定catchtap，这是一个可以防止冒泡的事件

3.巧用定时器设置属性值，可以实现类似先执行一个动画，再执行另一个动画的方法。

希望本文对微信小程序的开发有所帮助。