怎么在微信小程序中實(shí)現(xiàn)一個(gè)點(diǎn)擊空白隱藏功能-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)公司自成立以來(lái)，一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、電子商務(wù)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個(gè)性化軟件開(kāi)發(fā)等基于互聯(lián)網(wǎng)的全面整合營(yíng)銷(xiāo)服務(wù)。公司擁有豐富的網(wǎng)站建設(shè)和互聯(lián)網(wǎng)應(yīng)用系統(tǒng)開(kāi)發(fā)管理經(jīng)驗(yàn)、成熟的應(yīng)用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開(kāi)發(fā)工程師團(tuán)隊(duì)及專(zhuān)業(yè)的網(wǎng)站設(shè)計(jì)師團(tuán)隊(duì)。

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

<!-- 購(gòu)物車(chē)蒙層 -->
<view class='list-fix' wx:if="{{mengShow}}" bindtap='outbtn'>     //mengShow是蒙層是否顯示的標(biāo)志，然后蒙層綁定outbtn的點(diǎn)擊事件
  <view class='in-list {{aniStyle?"slideup":"slidedown"}}' catchtap='inbtn'>　　　　//這里的三元運(yùn)算符是判斷動(dòng)畫(huà)該執(zhí)行哪一種，catchtap這個(gè)是阻止冒泡的點(diǎn)擊事件，這個(gè)事件必須有，才能阻止冒泡
    <view class='in-content'>
      <text>已選商品（1）</text>
      <text class='iconfont icon-6'>清空購(gòu)物車(chē)</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>

注意：三元運(yùn)算符里的slideup和slidedown一定要加上引號(hào)

2.蒙層的其它樣式自己寫(xiě)。最主要的是slideup和slidedown的動(dòng)畫(huà)效果的樣式：

@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定位。

需要注意的一點(diǎn)是：做的時(shí)候，是從Y軸100%的位置處即最底部開(kāi)始運(yùn)動(dòng)或是從0到100%，所以要設(shè)置z-index，才能實(shí)現(xiàn)在底部運(yùn)動(dòng)起來(lái)的時(shí)候或者回到100%即底部的時(shí)候，蒙層浮在“確認(rèn)下單”這整個(gè)結(jié)構(gòu)的下面。即“確認(rèn)下單”這整個(gè)結(jié)構(gòu)的z-index要大于蒙層的z-index。

3.js

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

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

總結(jié)：

1.防止冒泡的點(diǎn)擊事件：catchtap=“”

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

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

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

當(dāng)前名稱(chēng)：怎么在微信小程序中實(shí)現(xiàn)一個(gè)點(diǎn)擊空白隱藏功能-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：http://muchs.cn/article34/djiope.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站策劃、電子商務(wù)、響應(yīng)式網(wǎng)站、服務(wù)器托管、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)