推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序菜单实现
发布时间:2020-11-15最近一个月都在做微信小程序，作为一个Android开发者，在这一个月很少写Android的代码，真是悲催，好在现在已经完整的把小程序做完了，下周就继续开始我的Android生涯了，现在回过头来写写自己认为比较常见的一些功能的实现，来帮助小程序学习爱好者学习参考。今天的这篇文章是关于微信小程序菜单的实现，话不多说，上图。
通过效果图，我们看到，窗口最上面是两个菜单按钮，它是固定悬浮在最上面，当点击时分别显示状态选择和时间选择，那此处状态就是我们购物订单的状态，有全部，待付款，等，并且当前选中的状态加上红色的边框，让用户知道当前的选择项。那点击时间时就显示显示开始日期和结束日期，当点击确定时对当前日期时间段的购物订单进行过滤。
状态和时间菜单按钮实现菜单按钮实现很简单，使用display：flex属性，使用position: fixed将其定位窗口显示 top: 0;left: 0;悬浮在最上面。上下都加上边框。
<view class="top-menu"> <view bindtap="showMenuTap" data-type="1">状态</view> <view class="line"></view> <view bindtap="showMenuTap" data-type="2">时间</view> </view>样式
.top-menu { display: flex; position: fixed; height: 80rpx; z-index: 10; background-color: #fff; width: 100%; top: 0; left: 0; align-items: center; justify-content: space-around; border-top: 2rpx solid #ddd; border-bottom: 2rpx solid #ddd; font-size: 11pt; color: #bdbdbd; } .line { width: 2rpx; height: 100%; background-color: #ddd; }两个菜单中间的分割线，我使用了一个view，当然依然可以使用border属性。在此处给加个z-index属性。稍后会介绍到他的作用。
弹出菜单实现 <view wx:if="{{menuType==1}}" class="state-menu " hidden="{{!isVisible}}"> <view class="state-item {{status==1?'border':''}}" bindtap="selectState" data-status="1">全部</view> <view class="state-item {{status==2?'border':''}}" bindtap="selectState" data-status="2">待付款</view> <view class="state-item {{status==3?'border':''}}" bindtap="selectState" data-status="3">待发货</view> <view class="state-item {{status==4?'border':''}}" bindtap="selectState" data-status="4">配送中</view> <view class="state-item {{status==5?'border':''}}" bindtap="selectState" data-status="5">待收货</view> <view class="state-item {{status==6?'border':''}}" bindtap="selectState" data-status="6">待评价</view> <view class="state-item {{status==7?'border':''}}" bindtap="selectState" data-status="7">退款</view> <view class="state-item {{status==8?'border':''}}" bindtap="selectState" data-status="8">已取消</view> </view> <!--日期选择--> <view wx:elif="{{menuType==2}}" class="state-menu" hidden="{{!isVisible}}"> <view class="date"> <view class="classname">开始日期: </view> <picker mode="date" value="{{date}}" data-type="1" bindchange="bindDateChange"> <view class="classname">{{begin==null?'不限':begin}}</view> </picker> </view> <view class="date"> <view class="classname">结束日期: </view> <picker mode="date" value="{{date}}" data-type="2" bindchange="bindDateChange"> <view class="classname">{{end==null?'不限' : end}}</view> </picker> </view> <button class="date-btn" bindtap="sureDateTap">确定</button> </view>样式
.state-menu { display: flex; position: fixed; left: 0; height: 200rpx; top: 80rpx; width: 100%; z-index: 9; background-color: #fff; flex-direction: row; border-bottom: 2rpx solid #ddd; justify-content: space-around; align-items: center; flex-wrap: wrap; } .state-item { width: 20%; height: 70rpx; font-size: 11pt; line-height: 70rpx; text-align: center; border-radius: 10rpx; border: 2rpx solid #ddd; } .border.state-item { border: 2rpx solid #c4245c; } .date { min-width: 40%; display: flex; font-size: 11pt; color: #bdbdbd; align-items: center; } .date-btn { min-width: 80%; font-size: 12pt; background-color: #c4245c; color: #fff; }