微信小程序scroll-view做图片横向滚动

        <scroll-view class="image-group" scroll-x="true">
          <image src="../../images/background_image1@2x.png"></image>
          <image src="../../images/background_image1@2x.png"></image>
          <image src="../../images/background_image1@2x.png"></image>
          <image src="../../images/background_image1@2x.png"></image>
          <image src="../../images/background_image1@2x.png"></image>
          <image src="../../images/background_image1@2x.png"></image>
        </scroll-view>

.image-group {
  display: flex;
  white-space: nowrap;
  margin-top: 30rpx;
}
.image-group image {
  display: inline-block;
  width: 375rpx;
  height: 180rpx;
  margin-right: 20rpx;
}

关键点是五个：

1、scroll-view标签

2、scroll-x=“true”属性

3、使用display:flex 让图片横向排列

4、使用 white-space: nowrap，让图片不换行

5、图片设置inline-block

效果图：