您好,登錄后才能下訂單哦!
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)CSS3動(dòng)畫下拉菜單效果,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
微信小程序沒有自帶的下拉菜單組件,因此我們需要自己需要寫一個(gè)
思路
利用列表來存儲(chǔ)菜單項(xiàng),在外面套一個(gè)view元素作為外框,將其設(shè)置為overflow:hidden,使用CSS3動(dòng)畫逐漸改變外層view元素的高度,當(dāng)高度為0時(shí),里面嵌套的列表元素被完全隱藏,相當(dāng)于菜單關(guān)閉。而當(dāng)view元素的高度大于列表元素的高度時(shí),相當(dāng)于菜單顯示。
效果圖
wxml
button按鈕用于觸發(fā)菜單的打開和關(guān)閉,first_click參數(shù)使用戶第一次點(diǎn)擊按鈕之前菜單不可見,state參數(shù)用于控制菜單的打開和關(guān)閉狀態(tài)
<view id="text_box"> <text decode='true'> 歷 史 記 錄</text> </view> <button id="slide" bindtap="toggle">▼</button> <view id="box" class="{{first_click?'show':'hide'}} {{state?'open':'close'}}"> <view id="item_list"> <view>111</view> <view>222</view> <view>333</view> </view> </view>
css
使用@keyframes動(dòng)畫實(shí)現(xiàn)菜單的漸變打開和關(guān)閉動(dòng)畫
#box{ width: 100%; border-top: 1px solid #ddd; overflow: hidden; height: 0; animation-fill-mode: forwards; } #item_list{ background-color: white; width: 100%; } #item_list view{ text-align: right; overflow: auto; white-space: nowrap; } @keyframes slidedown{ from { height: 0; } to { height: 240rpx; } } @keyframes slideup{ from { height: 240rpx; } to { height: 0; } } .open{ animation: slidedown 1s; } .close{ animation: slideup 1s; } .hide{ display: none; } .show{ display: block; }
js
頁面加載完成時(shí),菜單初始狀態(tài)為隱藏和關(guān)閉,用戶一旦點(diǎn)擊按鈕,菜單就顯示,并逐漸打開
data: { state:false, first_click:false, }, toggle: function(){ var list_state = this.data.state, first_state = this.data.first_click; if (!first_state){ this.setData({ first_click: true }); } if (list_state){ this.setData({ state: false }); }else{ this.setData({ state: true }); } }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“微信小程序如何實(shí)現(xiàn)CSS3動(dòng)畫下拉菜單效果”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。