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

相关推荐
IT_陈寒6 小时前
Vue这个奇葩的响应式问题让我加班到凌晨
前端·人工智能·后端
风骏时光牛马6 小时前
功能可用性自动化测试验证
前端
LucianaiB16 小时前
【元宝搜索开发者征文大赛】AI时代,学得慢就不用学?用元宝搜索打造一个教程保质期,确保每一个教程符合你的现状
前端·人工智能·ai编程
excel16 小时前
JavaScript 对象池:减少高频对象创建与 GC 压力
前端
陈随易18 小时前
纯 Go 写的 JS 引擎,跑分超过了 C 语言的 QuickJS
前端·后端·程序员
子兮曰19 小时前
Chrome 权限元素实战:144 与 151 的渐进增强写法
前端·javascript·chrome
IT_陈寒19 小时前
Redis连接池泄漏那次,我差点把生产环境搞崩了
前端·人工智能·后端
强尼银手20 小时前
我花一天做了个格斗游戏原型,判定全对,然后被「美术」劝退了
前端·javascript
石小石Orz20 小时前
AI 正在蚕食我们的编码能力
前端·后端·算法
陈随易20 小时前
专注飞机 FocusFlight,两个人把番茄钟做成了一趟航班
前端·后端·程序员