uniapp h5 横向的分类列表

要实现横向的分类列表，可以使用 uni-swiper 组件结合自定义样式来实现。

具体步骤如下：

1. 在页面中添加 uni-swiper 组件，设置为横向滑动模式。

<uni-swiper class="category-list" :autoplay="false" :indicator-dots="false" :circular="true" :vertical="false" :duration="500" :interval="3000">
  <!-- swiper-item -->
</uni-swiper>

2. 在 swiper-item 中添加分类列表的内容，并给每个分类项设置合适的样式。

<uni-swiper-item>
  <div class="category-item">
    <img src="/static/images/category-1.png" />
    <p>分类1</p>
  </div>
  <div class="category-item">
    <img src="/static/images/category-2.png" />
    <p>分类2</p>
  </div>
  <div class="category-item">
    <img src="/static/images/category-3.png" />
    <p>分类3</p>
  </div>
  <!-- 其他分类项 -->
</uni-swiper-item>

3. 在样式文件中设置 swiper-item 和 category-item 的样式，包括宽度、高度、间距、边框等。

.category-list {
  width: 100%;
  height: 100px;
}

.category-item {
  display: inline-block;
  width: 80px;
  height: 100%;
  margin-right: 20px;
  border: 1px solid #ddd;
  text-align: center;
  vertical-align: top;
}

.category-item img {
  width: 60px;
  height: 60px;
  margin-top: 10px;
}

.category-item p {
  font-size: 14px;
  margin-top: 5px;
}

这样就可以实现一个简单的横向分类列表了。如果需要更多的样式和交互效果，可以根据实际需求进行调整和扩展。