使用scroll-view实现区块横向滚动

# index.wxml

<!-- 使用scroll-y可以创建纵向滚动的区块 -->
<scroll-view class="myScoll" scroll-x>
  <!-- 使用.row{$}*8快速创建8列数据 -->
  <view class="row">1</view>
  <view class="row">2</view>
  <view class="row">3</view>
  <view class="row">4</view>
  <view class="row">5</view>
  <view class="row">6</view>
  <view class="row">7</view>
  <view class="row">8</view>

</scroll-view>

# index.wxss

.myScoll {
  width: 100%;
  background-color: gray;
  height: 250rpx;
  white-space: nowrap;
}
/* background 和background-color设置背景颜色有什么区别
background 和 background-color 都可以用来设置元素的背景颜色，但是它们的作用略有不同。
background-color 属性用于设置元素的背景颜色，可以接受任何 CSS 颜色值，包括颜色名称、十六进制值、RGB 值等。这个属性只能设置背景颜色，不能设置其他背景属性，如背景图片、背景位置等。
background 属性则更为强大，它可以设置元素的背景颜色、背景图片、背景位置、背景大小、背景重复方式等多个背景属性。background 属性的值是一个复合值，可以包含多个子属性，如 background: #fff url(bg.jpg) no-repeat center center / cover;，其中 #fff 是背景颜色，url(bg.jpg) 是背景图片，no-repeat 是背景重复方式，center center 是背景位置，/ cover 是背景大小。
因此，如果只需要设置元素的背景颜色，可以使用 background-color 属性；如果需要设置更多的背景属性，可以使用 background 属性。 */

.myScoll .row{
  background-color: greenyellow;
  height: 220rpx;
  width: 220rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  margin-left: 10rpx;
  display: inline-block;
}

最终效果

可以左右拉动