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

最新推荐文章于 2025-10-13 15:50:36 发布

原创最新推荐文章于 2025-10-13 15:50:36 发布 · 1.9w 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#scroll-view #css #轮播

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

6 篇文章

订阅专栏

本文详细介绍了WeUI框架中scroll-view组件的使用方法，包括如何通过scroll-x属性实现图片横向滚动展示，并利用CSS样式确保图片正确排列及不换行。通过具体代码示例，展示了如何设置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

效果图：