记录uniapp 滚动后溢出显示空白的办法

给钱，谢谢！2023-08-10 11:43

写了一个横向滚动，超出可视区域图片空白，上下滚动页面可视区域图片显示，不可见区域滚动出来变成空白

错误css如下

css 复制代码

   width: 678rpx;
  height: 264rpx;
    background: #ffffff;
    border-radius: 16rpx;
    margin: 64rpx 18rpx 10rpx 18rpx;
    overflow-y: hidden;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;

在UniApp中实现横向滚动并且溢出显示空白，可以使用scroll-view组件。

html 复制代码

<template>
  <view class="container">
    <scroll-view class="scroll-view" scroll-x>
      <view class="item" v-for="(item, index) in items" :key="index">
        {{ item }}
      </view>
    </scroll-view>
  </view>
</template>

<style>
.container {
  width: 100%;
  height: 200px;
  overflow-x: scroll;
}

.scroll-view {
  white-space: nowrap;
}

.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin-right: 10px;
}
</style>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
    };
  }
};
</script>