javascript - 小程序顶部分类滑动怎么实现？

问题描述

问 题

求大神教一下怎么可以让他滑动，我一直都滑动不了，写在swiper里面吗？能不能给上个代码看一下

解决方案

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]

这篇关于javascript - 小程序顶部分类滑动怎么实现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！