Skip to content

微信小程序——scroll-view横向排版

微信小程序 | January 23, 2021

文章链接：https://blog.csdn.net/qq_43201350/article/details/112801619

wxml文件

<scroll-view class="recommend_scroll" enable-flex scroll-x>
      <view class="sroll_item" wx:for="{{5}}">
        <image src="../../static/images/recommendSong/recommendSong.jpg"></image>
      </view>
</scroll-view>

less文件

.recommend_scroll {
  display: flex;
  height: 300rpx; //此处一定要设置一个高度
  .sroll_item {
    width: 200rpx;
    margin: 0 20rpx 0 0;
    image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 10rpx;
    }
  }
}