微信小程序CSS3動(dòng)畫下拉菜單效果
微信小程序沒有自帶的下拉菜單組件，因此我們需要自己需要寫一個(gè)
思路
利用列表來(lái)存儲(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
頁(yè)面加載完成時(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
});
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了webpack4.x下babel的安裝、配置及使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)導(dǎo)航跟隨效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
微信小程序?qū)嵺`之動(dòng)態(tài)控制組件的顯示/隱藏功能
這篇文章主要介紹了微信小程序?qū)嵺`之動(dòng)態(tài)控制組件的顯示/隱藏功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Javascript中的作用域和上下文深入理解,本文講解了作用域 VS 上下文、變量作用域、“this”上下文、執(zhí)行上下文(Execution Context)、作用域鏈等內(nèi)容,需要的朋友可以參考下2015-07-07
gojs實(shí)現(xiàn)螞蟻線動(dòng)畫效果
這篇文章介紹了gojs實(shí)現(xiàn)螞蟻線動(dòng)畫效果的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
前端獲取excel表格數(shù)據(jù)并在瀏覽器展示方法實(shí)例
在開發(fā)過(guò)程中,難免會(huì)碰到用前端來(lái)處理excel文件的需求,這篇文章主要給大家介紹了關(guān)于前端獲取excel表格數(shù)據(jù)并在瀏覽器展示方的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序代碼上傳、審核發(fā)布小程序，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
淺談javascript中call()、apply()、bind()的用法
一直對(duì)Javascript中的apply/call/bind的用法很模糊，恰好看到了這篇文章。對(duì)三者之間的區(qū)別與聯(lián)系算是有了比較清晰的認(rèn)識(shí)。這里記錄下來(lái)，分享給大家。2015-04-04
在一個(gè)js文件里遠(yuǎn)程調(diào)用jquery.js會(huì)在ie8下的一個(gè)奇怪問(wèn)題
這樣的腳本你在ie8下調(diào)用，在ie8地址欄下按下回車后調(diào)用jquery的對(duì)像、方法什么的沒有問(wèn)題，但是刷新之后就有問(wèn)題。就是刷新之后無(wú)論怎樣你要在地址欄按一下回車。2010-11-11
JavaScript實(shí)現(xiàn)函數(shù)緩存及應(yīng)用場(chǎng)景
在JavaScript中,可以通過(guò)函數(shù)緩存來(lái)提高函數(shù)的執(zhí)行效率,本文就來(lái)介紹一下JavaScript實(shí)現(xiàn)函數(shù)緩存及應(yīng)用場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01