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

摘自网络文章

思路：使用的是小程序的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]