scroll-view无法滚动

最新推荐文章于 2023-04-06 15:23:32 发布

原创最新推荐文章于 2023-04-06 15:23:32 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍微信小程序中scroll-view组件的使用技巧，实现横向滚动效果。通过设置父元素宽度及overflow属性，调整子元素display属性，展示多张图片的无缝滚动。适用于小程序开发人员学习与实践。

开发十年，就只剩下这套架构体系了！ >>>

微信小程序中的scroll-view组件的使用（横向滚动）

1. 需要将srcoll-view的父元素设置宽度，以及ovflow: hidden;white-space: no-wrap;

2. 滚动元素设置为display: inline-block;

代码：

view class="scroll-wrapper">
    <scroll-view scroll-x="{{true}}" style="height: 140rpx;">
        <image class="scroll-item" src="../../../assets/images/class/small/1.jpg"></image>
        <image class="scroll-item" src="../../../assets/images/class/small/2.jpg"></image>
        <image class="scroll-item" src="../../../assets/images/class/small/3.jpg"></image>
        <image class="scroll-item" src="../../../assets/images/class/small/1.jpg"></image>
        <image class="scroll-item" src="../../../assets/images/class/small/2.jpg"></image>
        <image class="scroll-item" src="../../../assets/images/class/small/2.jpg"></image>
        <image class="scroll-item" src="../../../assets/images/class/small/2.jpg"></image>
    </scroll-view>
</view>

样式：

.scroll-wrapper {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.scroll-item {
  width: 140rpx;
  height: 140rpx;
  border-radius: 12rpx;
  margin-right: 16rpx;
  display: inline-block;
}

.scroll-item:last-child {
  margin-right: 0;
}