# 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;
}
最终效果
可以左右拉动