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

最新推荐文章于 2024-11-21 13:56:16 发布

给钱，谢谢！

最新推荐文章于 2024-11-21 13:56:16 发布

阅读量1.8k

点赞数

文章标签： uni-app css css3

本文链接：https://blog.youkuaiyun.com/weixin_43073383/article/details/132107221

版权

博客主要讲述在UniApp中实现横向滚动且超出可视区域图片空白，上下滚动时可视区域图片显示、不可见区域滚动出来变空白的效果，还给出了错误的css示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写了一个横向滚动，超出可视区域图片空白，上下滚动页面可视区域图片显示，不可见区域滚动出来变成空白
错误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组件。


<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>