怎么在微信小程序中实现一个点击空白隐藏功能-创新互联

怎么在微信小程序中实现一个点击空白隐藏功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

创新互联公司自成立以来，一直致力于为企业提供从网站策划、网站设计、成都网站设计、做网站、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

1.蒙层的结构：

     //mengShow是蒙层是否显示的标志，然后蒙层绑定outbtn的点击事件
  　　　　//这里的三元运算符是判断动画该执行哪一种，catchtap这个是阻止冒泡的点击事件，这个事件必须有，才能阻止冒泡
    
      已选商品（1）
      清空购物车
    
    
      {{item.Cname}}
      ￥{{item.Cprice}}
      
        -   
        {{item.Cnum}}
        +   
      
    
  

注意：三元运算符里的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.巧用定时器设置属性值，可达到类似上面执行一个动画之后再执行另外一个动画的方法。

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。

网页名称：怎么在微信小程序中实现一个点击空白隐藏功能-创新互联
当前网址：http://cxhlcq.com/article/djiope.html