最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

怎么在微信小程序中實現(xiàn)一個點擊空白隱藏功能？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司擁有十年成都網(wǎng)站建設(shè)工作經(jīng)驗,為各大企業(yè)提供成都網(wǎng)站建設(shè)、做網(wǎng)站服務(wù)，對于網(wǎng)頁設(shè)計、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、成都app開發(fā)、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、程序開發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、域名注冊等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計、網(wǎng)絡(luò)營銷經(jīng)驗，集策劃、開發(fā)、設(shè)計、營銷、管理等網(wǎng)站化運作于一體，具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項目的能力。

1.蒙層的結(jié)構(gòu)：

     //mengShow是蒙層是否顯示的標(biāo)志，然后蒙層綁定outbtn的點擊事件
  　　　　//這里的三元運算符是判斷動畫該執(zhí)行哪一種，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%，所以要設(shè)置z-index，才能實現(xiàn)在底部運動起來的時候或者回到100%即底部的時候，蒙層浮在“確認(rèn)下單”這整個結(jié)構(gòu)的下面。即“確認(rèn)下單”這整個結(jié)構(gòu)的z-index要大于蒙層的z-index。

3.js

page({
  data: {
    mengShow:false,//蒙層的顯示與否
  　　 aniStyle:true,  //動畫效果，默認(rèn)slideup     
  },
  //蒙層的顯示
  showMeng:function(e){     //這是“確認(rèn)下單”這整個購物車導(dǎo)航欄的點擊事件
    this.setData({
      mengShow:true,      //蒙層顯示
      aniStyle:true　　　　　　　　//設(shè)置動畫效果為slideup
    })
  },
  outbtn:function(e){      //這是list-fix的點擊事件，給它綁定事件，是為了實現(xiàn)點擊其它地方隱藏蒙層的效果
    var that=this;
    this.setData({　　　　　　　　
      aniStyle:false　　　　　　//設(shè)置動畫效果為slidedown
    })
    setTimeout(function(){    //延時設(shè)置蒙層的隱藏，這個定時器的時間，就是slidedown在css動畫里設(shè)置的時間，這樣就能實現(xiàn)slidedown動畫完成后，蒙層才消失的效果。不設(shè)置定時器會導(dǎo)致動畫效果看不見
      that.setData({
        mengShow: false
      })
    },500)
  },
  inbtn:function(e){     //這個事件必須有，就算不做什么事情也要寫上去，因為這個事件是為了防止事件冒泡，導(dǎo)致點擊in-list這里面的元素時，點擊事件冒泡到list-fix觸發(fā)它的slidedown事件。
    console.log("in")
  }, 
})

這樣就能實現(xiàn)slidedown和slideup，點擊其它地方隱藏某元素的功能了。

總結(jié)：

1.防止冒泡的點擊事件：catchtap=“”

2.點擊父元素除子元素以外的其它地方隱藏父元素的方法：父元素綁定一個點擊隱藏事件，然后子元素綁定catchtap這種能阻止冒泡的事件

3.巧用定時器設(shè)置屬性值，可達(dá)到類似上面執(zhí)行一個動畫之后再執(zhí)行另外一個動畫的方法。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

本文標(biāo)題：怎么在微信小程序中實現(xiàn)一個點擊空白隱藏功能
當(dāng)前路徑：http://fisionsoft.com.cn/article/jepjed.html