当前位置: 首页 > news >正文

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

写了一个横向滚动,超出可视区域图片空白,上下滚动页面可视区域图片显示,不可见区域滚动出来变成空白
错误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>
http://www.lryc.cn/news/109380.html

相关文章:

  • 设计原则学习之里氏替换原则
  • 排序进行曲-v4.0
  • Flink 系列四 Flink 运行时架构
  • 14-3_Qt 5.9 C++开发指南_QUdpSocket实现 UDP 通信_UDP 单播和广播
  • 【知识图谱】图数据库Neo4jDesktop的安装图文详解(小白适用)
  • kafka中幂等性producer和事务性producer
  • 静态路由 (华为设备)
  • Django学习笔记-默认的用户认证系统(auth)
  • [SQL挖掘机] - 存储过程
  • MySQL8.0.32详细安装教程(奶妈级手把手教你安装)
  • glut太阳系源码修改和对cpu占用观察
  • 掌握NLTK:Python自然语言处理库中级教程
  • Go语言的崛起:探究越来越多公司选择Go语言的原因和优势
  • MongoDB 6.0.8 安装配置
  • 无涯教程-Lua - nested语句函数
  • 如何使用vue ui创建一个项目?
  • STM32——LED内容补充(寄存器点灯及反转的原理)
  • 使用Spring Boot和EasyExcel的导入导出
  • 【H5移动端】常用的移动端方案合集-键盘呼起、全面屏适配、图片大小显示、300ms点击延迟、首屏优化(不定期补充~)
  • 迭代器模式——遍历聚合对象中的元素
  • 亿赛通电子文档安全管理系统远程命令执行
  • 多雷达探测论文阅读笔记:雷达学报 2023, 多雷达协同探测技术研究进展:认知跟踪与资源调度算法
  • 【Redis】——AOF持久化
  • Keil MDK环境下FreeModebus移植踩坑记录
  • 计算机视觉的延伸整理
  • 通过Idea部署Tomcat服务器(详细图文教学)
  • Window版本ES(ElasticSearch)的安装,使用,启动
  • 网络面试题-UDPTCP
  • 在CSDN学Golang场景化解决方案(即时通讯goim)
  • chrome插件开发实例02-使用content_scripts对用户浏览页面操作