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

最新推荐文章于 2025-05-19 11:12:39 发布

scorpio_h

最新推荐文章于 2025-05-19 11:12:39 发布

阅读量1.9w

点赞数 9

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： scroll-view css 轮播

本文链接：https://blog.youkuaiyun.com/scorpio_h/article/details/80512992

微信小程序专栏收录该内容

6 篇文章

订阅专栏

        <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

效果图：