uniapp scroll-view横向滚动无效,scroll-view子元素flex布局不生效

要素排查:

1.scroll-x属性需要开启,官方类型是Boolean,实际字符串也行。

2scroll-view标签需要给予一个固定宽度,可以是百分百也可以是固定宽度或者100vw。

3.子元素需要设置display: inline-block(行内块元素)属性,scroll-view需要设置white-space: nowrap(不换行)

当使用scroll-view横向滚动的时候一般场景都是有多个子元素超出屏幕宽度了需要滑动,所以需要给予子元素display: inline-block属性

flex布局:

scroll-view的子元素需要设置flex布局的时候需要设置:enable-flex="true"属性开启flex布局

当子元素item里面还有其他元素需要设置display:flex,这是设置子元素为display: inline-block就不能设置为flex布局, 这时就需要给子元素里面的子元素都设置成inline-block或者其他布局了,然后再调整样式。

相关推荐
hasty1 分钟前
HTML 已经转义,为何仍有 XSS?Sharp srcdoc 漏洞中的第二次解析
前端·html·xss
涛涛ing2 分钟前
WebMCP正式进入Origin Trial:AI Agent不再“装人”,前端交互范式正在被重写
前端
y = xⁿ7 分钟前
关于Agent智能体开发
开发语言·前端·javascript
梅孔立10 分钟前
Codex 完整教程(Node.js安装 + npm安装Codex + DeepSeek配置 + 快捷键 + 设置)
前端·npm·node.js
事圆则缓18 分钟前
Flutter 状态管理框架对比(一):先看地图,再选工具
前端·javascript·flutter
中杯可乐多加冰21 分钟前
解决方案:CEB 文件 Web 端在线预览方案,Linux部署ceb文件在线预览工具
linux·运维·前端·ceb
晚风醉蝶26 分钟前
webpack 模块提取
前端·webpack·node.js·ast·逆向分析
IMPYLH30 分钟前
HTML 的 <tfoot> 元素
前端·javascript·html
像风一样自由202035 分钟前
42.VueReactNextjs如何为AI应用设计前端交互
前端·人工智能·大模型·交互·rag·智能体
鬼手点金36 分钟前
Claude Code示范案例-修复 Bug 工作流
java·服务器·前端·javascript·bug·openclaw