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或者其他布局了,然后再调整样式。

相关推荐
谷哥的小弟23 分钟前
TypeScript对象类型
javascript·typescript
稚南城才子,乌衣巷风流1 小时前
函数:编程中的核心概念
开发语言·前端·javascript
IT_陈寒1 小时前
为什么我的JavaScript异步代码总是不按顺序执行?
前端·人工智能·后端
索西引擎2 小时前
【React】useState 状态更新机制:批量更新策略与“异步“错觉的深层解析
前端·react.js·前端框架
慢功夫2 小时前
💡第五篇:VSCode插件是如何与主进程通信的?
前端·visual studio code
锋行天下2 小时前
打造企业内部知识库系统RAG全栈项目
前端·后端·架构
竹林8182 小时前
用 ethers.js 连接 MetaMask 实现钱包登录:一个真实项目中的完整踩坑记录
前端·javascript
虚惊一场3 小时前
在浏览器里跑 Prettier:格式化 Markdown 的四个难点
前端·javascript·vue.js
前端炒粉3 小时前
手撕小汇总
java·前端·javascript
r_oo_ki_e_3 小时前
vue快速入门
前端·vue.js