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

相关推荐
Cobyte19 小时前
2.响应式系统基础:依赖追踪的基础 —— 发布订阅模式(前端应用最广的设计模式)
前端·javascript·vue.js
慧一居士20 小时前
Nitro 和nuxt4框架关系
前端
IT_陈寒20 小时前
React的useEffect把我坑惨了,这种闭包问题谁能想到
前端·人工智能·后端
xuankuxiaoyao20 小时前
VUE.JS实践--事件对象和计算属性
javascript·vue.js·ecmascript
前端老石人20 小时前
表单与交互式元素
前端·css·html
果粒蹬i20 小时前
自用超半年的免费 OCR 工具分享:告别付费,本地搭建更安心
前端·网络·ocr
朝阳58120 小时前
M3U8 下载助手油猴脚本 - 完全使用指南
前端·javascript·windows
早點睡39020 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-sensors(设备传感器)
javascript·react native·react.js
kadog20 小时前
GraphX:基于 WebGL 区间算术的 GPU 加速隐函数绘图器
前端·javascript·数学建模·webgl
utmhikari20 小时前
【DIY小记】解决MacOS上Edge浏览器bilibili全屏卡顿的问题
前端·macos·性能优化·edge·bilibili