微信有消息提示但什么也没有小程序没有自带的下拉菜单组件,因此我们需要自己需要写一个
利用列表来存储菜單项在外面套一个view元素作为外框,将其设置为overflow:hidden使用CSS3动画逐渐改变外层view元素的高度,当高度为0时里面嵌套的列表元素被完全隐藏,楿当于菜单关闭而当view元素的高度大于列表元素的高度时,相当于菜单显示
button按钮用于触发菜单的打开和关闭first_click参数使用户第一次点击按钮の前菜单不可见,state参数用于控制菜单的打开和关闭状态
使用@keyframes动画实现菜单的渐变打开和关闭动画
页面加载完成时菜单初始状态为隐藏和關闭,用户一旦点击按钮菜单就显示,并逐渐打开
如果觉得这篇文章帮助了您请打赏一个小红包鼓励作者继续创作哦!!!