微信小程序實現點擊空白隱藏的方法示例

<!-- 購物車蒙層 -->
<view class='list-fix' wx:if="{{mengShow}}" bindtap='outbtn'> //mengShow是蒙層是否顯示的標志，然后蒙層綁定outbtn的點擊事件
 <view class='in-list {{aniStyle?"slideup":"slidedown"}}' catchtap='inbtn'>　　　　//這里的三元運算符是判斷動畫該執行哪一種，catchtap這個是阻止冒泡的點擊事件，這個事件必須有，才能阻止冒泡
 <view class='in-content'>
 <text>已選商品（1）</text>
 <text class='iconfont icon-6'>清空購物車</text>
 </view>
 <view class='cho-list' wx:for="{{chooseList}}" wx: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-btn add' >+</view> 
 </view>
 </view>
 </view>
</view>

@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);
 }
}

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")
 }, 
})