scroll-view组件就是滚动的视窗,使用scroll-view组件时,要想横向滚动或者纵向滚动时,需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是,纵向滚动需要给scroll-view组件限定高度,横向滚动则需要给scroll-view组件添加一个限定的宽度。 list.wxml <scroll-viewclass="container"scroll-y><v...
微信小程序提供了scroll-view组件,用于实现可滚动的视图区域,该组件支持横向和纵向滚动,适用于需要展示长列表或宽幅内容的场景。以下是关于scroll-view组件的详细使用指南。 一、基本用法 scroll-view组件的基本用法非常简单,只需在wxml文件中添加scroll-view标签,并设置相应的属性和内容即可。例如,可以创建一个包含多个子...
微信小程序2.7以前,因为无法直接对 scroll-view 设置 flex 页面,来实现在 x 方向上放置元素,通常的做法是在这些元素上面再套一个容器,同时还要手动来计算这个容器的宽度 这样做的坏处是: 1、被迫多了一个 view 2、手动计算容器宽度在一些可变宽度元素存在时,有问题(尽管纯文字内容也可以使用 canvas 来实现参考,但...
1.scroll-view默认是不滚动的。。所以要先设置scroll-x="true"或者scroll-y="true" 2. 在scroll-view里面添加定宽元素,超过scroll-view宽度(设置了100%,即屏幕宽度)后,它竟然换行了。所以要scroll-view的样式要这样设置: scroll-view {width:100%;white-space: nowrap; // 不让它换行 } AI代码助手复制代码...
横向滚动 1、需要打开是否允许横向滚动。 scroll-x 2、需要设置scroll-view的宽度 width:100%; 3、需要设置scroll-view的white-space: nowrap;nowrap是强制不换行的意思。如果换行了,就起不到效果了。 4、需要设置子元素display: inline-block;行内块元素...
当设置为scroll-x 时, 需要将其宽度设为固定值 规定内部的文本不要换行:white-space:nowrap; 设置其内部文本 为 行内块元素 如果整个页面,即最外层标签为scroll-view,需要并将其高度设为100%,也需要将page设为100%(可在app.wxss中设置)。 示例
3、scroll-view 组件的基本使用 可以基于刚才的效果来实现元素纵向滚动效果。注意:这里要使用纵向滚动时,必须给scroll-view一个固定高度,同理横向滚动也是需要一个固定宽度。 scroll-y属性:允许纵向滚动; scroll-x属性:允许横向滚动; CshPage1.wxml: ...
固定一下宽度试试
外层容器的高度要使用明确的值：100%或者680px这种值，如果使用auto 隐藏滚动条不起作用。