scroll-view沒法滾動

微信小程序中的scroll-view組件的使用(橫向滾動)

1. 須要將srcoll-view的父元素設置寬度,以及ovflow: hidden;white-space: no-wrap;css

2. 滾動元素設置爲display: inline-block;html

代碼:小程序

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;
}
相關文章
相關標籤/搜索