微信小程序CSS3动画下拉菜单效果资源-CSDN文库

116 浏览量 2020-12-29 05:51:53 上传评论 1 收藏 74KB PDF 举报

资源详情

资源评论

资源推荐

微信小程序微信小程序CSS3动画下拉菜单效果动画下拉菜单效果

微信小程序没有自带的下拉菜单组件，因此我们需要自己需要写一个

思路思路

利用列表来存储菜单项，在外面套一个view元素作为外框，将其设置为overflow：hidden，使用CSS3动画逐渐改变外层view

元素的高度，当高度为0时，里面嵌套的列表元素被完全隐藏，相当于菜单关闭。而当view元素的高度大于列表元素的高度

时，相当于菜单显示。

效果图效果图

wxml

button按钮用于触发菜单的打开和关闭，first_click参数使用户第一次点击按钮之前菜单不可见，state参数用于控制菜单的打

开和关闭状态

<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动画实现菜单的渐变打开和关闭动画

#box{

width: 100%;

border-top: 1px solid #ddd;

overflow: hidden;

height: 0;

animation-fill-mode: forwards;

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

内容反馈

weixin_38543460

粉丝: 6
资源: 982

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip