微信小程序?qū)崿F(xiàn)點擊空白隱藏的方法示例
怎樣實現(xiàn)jq中的slideUp或者slideDown這種動畫效果呢，我的思路是用css3的transform: translateY（）屬性，給需要動畫的元素添加上一個動畫class。
先上效果圖：
1.蒙層的結(jié)構(gòu)：
<!-- 購物車蒙層 -->
<view class='list-fix' wx:if="{{mengShow}}" bindtap='outbtn'> //mengShow是蒙層是否顯示的標(biāo)志，然后蒙層綁定outbtn的點擊事件
<view class='in-list {{aniStyle?"slideup":"slidedown"}}' catchtap='inbtn'> //這里的三元運算符是判斷動畫該執(zhí)行哪一種，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>
注意：三元運算符里的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è)置屬性值，可達到類似上面執(zhí)行一個動畫之后再執(zhí)行另外一個動畫的方法。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS實現(xiàn)盒子跟著鼠標(biāo)移動及鍵盤方向鍵控制盒子移動效果示例
這篇文章主要介紹了JS實現(xiàn)盒子跟著鼠標(biāo)移動及鍵盤方向鍵控制盒子移動效果,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
微信小程序出現(xiàn)wx.navigateTo頁面不跳轉(zhuǎn)問題的解決方法
這篇文章主要介紹了微信小程序出現(xiàn)wx.navigateTo頁面不跳轉(zhuǎn)問題的解決方法,簡單分析了微信小程序出現(xiàn)wx.navigateTo頁面不跳轉(zhuǎn)情況的原因及相應(yīng)的解決方法,需要的朋友可以參考下2017-12-12
在javascript中，帶小數(shù)的數(shù)據(jù)運算時總會出現(xiàn)好多位小數(shù).這是因為在javascript中浮點數(shù)的計算是以2進制計算的2014-05-05
在客戶端中，要對字符串編碼，可以采用：escape（）；encodeurl（）；encodeURIComponent（）；下面我們就來具體講解下這幾個方法。2015-05-05
javascript實現(xiàn)根據(jù)函數(shù)名稱字符串動態(tài)執(zhí)行函數(shù)的方法示例
這篇文章主要介紹了javascript實現(xiàn)根據(jù)函數(shù)名稱字符串動態(tài)執(zhí)行函數(shù)的方法,結(jié)合實例形式分析了JS函數(shù)名的判斷及函數(shù)動態(tài)調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了fullCalendar日歷插件玩法示例解析,包括Fullcalendar安裝,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
js實現(xiàn)控制文件拖拽并獲取拖拽內(nèi)容功能
