uniapp里的vue文件和nvue文件的<scroll-view>组件的不同

<scroll-view>是滚动容器,适用于页面上的区域滚动。(我之前一直以为滚动就一定要用<scroll-view>来做,后来才知道页面本身就可以滚动,而且页面滚动的性能是优于<scroll-view>的。)

在.vue里的<scroll-view>,我记得跟微信小程序的是一样的,display不可以为flex,(设置了也是无效的)如果要使用flex布局,只能在里面套一层<view>让里面的<view>的display为flex,然后里面的才是内容。所以对于需要横向的局部滚动,我都是这么做的。

刚才在做一个nvue页面,也是遇到了横向局部滚动的场景。我如法炮制,结果失败了。我忽然想到,在nvue里,必须使用flex布局,因为所有的组件display都是flex(而且也是不可以修改为其他值的)所以,也包括<scroll-view>喽?于是我把<scroll-view>里层的<view>删掉,然后让<scroll-view>的flex方向为row,里面直接就是内容。果然实现了横向滚动

所以结论是,在vue文件中的<scroll-view>的display不能被设为flex,所以要在里面套一层display为flex的<view>,让这整个长条的<view>在里面左右滚动;在nvue文件中万物皆flex,所以<scroll-view>也是flex,把flex方向设为横向,再加上scroll-x,即可实现横向滚动,在里面再套一层<view>反而是不行的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值