<!-- 購物車蒙層 --><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")  },})