```
<scroll-view scroll-x class="scroll">
<view class="category" >
<view class="cateList" wx:for="{{categoryList}}" wx:key="index">
<image src="{{item.img}}"></image>
<view class="categoryName">{{item.name}}</view>
</view>
</view>
</scroll-view>
```
```
//重點：不換行
.scroll{
width: 100vw;
height: 200rpx;
white-space: nowrap;
text-align: center;
}
.category{
width: 98%;
padding: 0 10rpx;
margin: 20rpx 0;
}
.cateList{
display: inline-block;
width: 26%;
background-color: #fff;
text-align: center;
border-radius: 60%;
margin-right: 20rpx;
}
.cateList image{
transform: translatey(-10rpx);
width: 64rpx;
height: 64rpx;
}
.categoryName{
margin-top: 24rpx;
font-size: 30rpx;
color: rgb(226, 107, 226);
}
```
