微信小程序开发之顶部滑动导航菜单

摘自网络文章

思路：使用的是小程序的scroll-view

html部分
<scroll-view class="meal-time-list" scroll-x scroll-with-animation>

<view wx:for="{{mealTimeList}}" class="{{curMeal===index ? 'selected-meal':'meal-time-item'}}" data-index="{{index}}" bindtap="selectMeal" data-id="{{item._id}}">{{item.name}}</view>
</scroll-view>

css部分
.meal-time-list {
width: 80%;
height: 88rpx;
border-bottom: 1rpx solid #e5e5e5;
display: inline-block;
white-space: nowrap;

}

.meal-time-item {
width: 20%;
height: 85rpx;
display: inline-block;
line-height: 85rpx;
vertical-align: middle;
text-align: center;
}

.selected-meal {
width: 20%;
height: 85rpx;
color: #1aae18;
border-bottom: 5rpx solid #1aae18;
display:inline-block;
line-height: 85rpx;
vertical-align: middle;
text-align: center;
}![![图片描述][1]][1]