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

相关推荐
Momo__10 小时前
VueUse createReusableTemplate —— 单文件组件内的模板复用神器
前端·vue.js
只一10 小时前
😭从回调地狱到 async/await:一文打通 Ajax 与 JS 异步编程
javascript
程序员小富10 小时前
我开源了一个开发者专属的智能 JSON 工具,得到了媳妇高度认可
前端·vue.js·后端
小小小小宇10 小时前
程序员如何给 LLM 装工具以及看懂推理过程
前端
写代码的皮筏艇10 小时前
React中的forwardRef
前端·react.js·面试
槑有老呆10 小时前
花三个月工资请了个 AI 程序员,结果它连青岛啤酒股价都查不了
前端
风骏时光牛马10 小时前
Verilog开发常见问题汇总解析
前端
子兮曰10 小时前
AI Coding Method Map:一张图看懂 AI 编程的完整链路
前端·人工智能·后端
weedsfly10 小时前
语法糖褪去之后——Babel 转译产物中的 JavaScript 本貌
前端·javascript