小程序生成平台_微信小程序完成点击空白隐藏的

微信小程序实现点击空白隐藏的方法示例       这篇文章主要介绍了微信小程序实现点击空白隐藏的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class。

先上效果图:


1.蒙层的结构:

 !-- 购物车蒙层 -- 
 view wx:if="{{mengShow}}" bindtap='outbtn' //mengShow是蒙层是否显示的标志,然后蒙层绑定outbtn的点击事件
 view class='in-list {{aniStyle "slideup":"slidedown"}}' catchtap='inbtn' //这里的三元运算符是判断动画该执行哪一种,catchtap这个是阻止冒泡的点击事件,这个事件必须有,才能阻止冒泡
 view 
 text 已选商品(1) /text 
 text 清空购物车 /text 
 /view 
 view wx:for="{{chooseList}}" wx:key="" 
 view {{item.Cname}} /view 
 view ¥{{item.Cprice}} /view 
 view 
 view - /view 
 view {{item.Cnum}} /view 
 view + /view 
 /view 
 /view 
 /view 
 /view 

注意:三元运算符里的slideup和slidedown一定要加上引号

2.蒙层的其它样式自己写。最主要的是slideup和slidedown的动画效果的样式:

@keyframes slidedown {
 from {
 transform: translateY(0);
 to {
 transform: translateY(100%);
.slidedown {
 animation: slidedown 0.5s linear ;
.slideup {
 animation: slideup 0.5s linear ;
@keyframes slideup {
 from {
 transform: translateY(100%);
 to {
 transform: translateY(0);
}

其它的样式:list-fix是fixed定位,而in-list是absolute定位。

需要注意的一点是:做的时候,是从Y轴100%的位置处即最底部开始运动或是从0到100%,所以要设置z-index,才能实现在底部运动起来的时候或者回到100%即底部的时候,蒙层浮在“确认下单”这整个结构的下面。即“确认下单”这整个结构的z-index要大于蒙层的z-index。

3.js

page({
 data: {
 mengShow:false,//蒙层的显示与否
 aniStyle:true, //动画效果,默认slideup 
 //蒙层的显示
 showMeng:function(e){ //这是“确认下单”这整个购物车导航栏的点击事件
 this.setData({
 mengShow:true, //蒙层显示
 aniStyle:true //设置动画效果为slideup
 outbtn:function(e){ //这是list-fix的点击事件,给它绑定事件,是为了实现点击其它地方隐藏蒙层的效果
 var that=this;
 this.setData({ 
 aniStyle:false //设置动画效果为slidedown
 setTimeout(function(){ //延时设置蒙层的隐藏,这个定时器的时间,就是slidedown在css动画里设置的时间,这样就能实现slidedown动画完成后,蒙层才消失的效果。不设置定时器会导致动画效果看不见
 that.setData({
 mengShow: false
 },500)
 inbtn:function(e){ //这个事件必须有,就算不做什么事情也要写上去,因为这个事件是为了防止事件冒泡,导致点击in-list这里面的元素时,点击事件冒泡到list-fix触发它的slidedown事件。
 console.log("in")
})

这样就能实现slidedown和slideup,点击其它地方隐藏某元素的功能了。

总结:

1.防止冒泡的点击事件:catchtap=“”

2.点击父元素除子元素以外的其它地方隐藏父元素的方法:父元素绑定一个点击隐藏事件,然后子元素绑定catchtap这种能阻止冒泡的事件

3.巧用定时器设置属性值,可达到类似上面执行一个动画之后再执行另外一个动画的方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。