scroll-view是uniapp提供的一个滚动视图容器组件,用于显示可滚动的内容。 通过设置不同的属性,可以实现横向或纵向的滚动效果。 设置scroll-view为横向滑动: 要实现横向滑动,需要在scroll-view组件上设置scroll-x="true"属性。这个属性用于控制是否允许横向滚动。 在uniapp项目中添加scroll-view组件,并设置其属性: ...
1、scroll-view必须设置为:white-space: nowrap; 2、item布局最外层,必须为行内布局,例如:inline-block或inline-flex
scroll-view重要的三个属性scroll-x="true";overflow: hidden;white-space: nowrap; scroll-view中的item的主要属性display: inline-block;©著作权归作者所有,转载或内容合作请联系作者 1人点赞 日记本 更多精彩内容,就在简书APP "小礼物走一走,来简书关注我"赞赏支持还没有人赞赏,支持一下 ...
2、纵向滚动基本写法 <template> <view> <!-- 这层标签没有也可以 --> <view class="uni-padding-wrap uni-common-mt"> <view> <scroll-view class="scroll-view" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" @scrolltoupper="upper"@scrolltolower="lower"> <view class="scroll-v...
本来横向滚动只要子元素宽度大于scroll-view固定宽度就可以滚动的,但是IOS App开发中子元素高度必须要大于scroll-view宽度才能滚动,应该是拿错参数了。 解决方案: scroll-view内部添加一个宽度为1像素的透明的占位View把内部容器的高度撑大即可(下图红色线条所示),高度为子元素的总宽度(下图蓝框),这样无论有多少个子元...
场景一:布局中已知高度局部滚动 一般页面布局中某个模块需要局部滚动,以横向滚动更多,纵向滚动其实也类似。这个也是 scroll-view 最简单的用法,纵向滚动直接设置一个已知的固定高度 height 就行了,没啥难度。 场景二:整个布局上、中、下3个模块布局,中间局部滚动 ...
</scroll-view> css .kite-classify-scroll{ width: 100%; height: 150px; overflow: hidden; white-space: nowrap; } .kite-classify-cell{ display: inline-block; width: 115px; height: 140px; } 2、多排横向滚动 html <scroll-view scroll-x="true" class="kite-classify-scroll"> ...
uni-app scroll-view横向、纵向基本使用,官网介绍:可滚动视图区域。用于区域滚动属性说明:注意:使用竖向滚动时,需要给<scroll-view>一个固定高度,通过css设置height;使用横向滚动时,需要给<scroll-view>添加white-space:nowrap;样式一、纵向二、横向...
在uniapp开发中，scroll-view组件用于创建可滚动视图区域，支持竖向和横向滚动。具体使用方法如下：首先，需要给scroll-view设置固定高度，通过css设置高度属性。若需竖向滚动，确保设置了一个固定高度。若需横向滚动，则需添加white-space: nowrap样式。在微信小程序文档中，scroll-view同样用于可滚动视图区域...
2023-08-04 uniapp之scroll-view无法横向滚动 解决方案: 给scroll-view设置样式 white-space: nowrap 然后scroll-view里面的子项要设置样式为 display: inline-block; 接着scroll-view的属性scroll-x要设置为true scroll-x="true" 如果这都不出现滚动,那么原因可能有二:...