微信小程序菜品做法展示数据库设计_微信小程序菜单实现

最近一个月都在做微信小程序，作为一个Android开发者，在这一个月很少写Android的代码，真是悲催，好在现在已经完整的把小程序做完了，下周就继续开始我的Android生涯了，现在回过头来写写自己认为比较常见的一些功能的实现，来帮助小程序学习爱好者学习参考。今天的这篇文章是关于微信小程序菜单的实现，话不多说，上图。

menu1.gif

通过效果图，我们看到，窗口最上面是两个菜单按钮，它是固定悬浮在最上面，当点击时分别显示状态选择和时间选择，那此处状态就是我们购物订单的状态，有全部，待付款，等，并且当前选中的状态加上红色的边框，让用户知道当前的选择项。那点击时间时就显示显示开始日期和结束日期，当点击确定时对当前日期时间段的购物订单进行过滤。

状态和时间菜单按钮实现

菜单按钮实现很简单，使用display：flex属性，使用position: fixed将其定位窗口显示 top: 0;left: 0;悬浮在最上面。上下都加上边框。

状态

时间

样式

.top-menu {

display: flex;

position: fixed;

height: 80rpx;

z-index: 10;

background-color: #fff;

width: 100%;

top: 0;

left: 0;

align-items: center;

justify-co