方案2:使用flex布局 该方案和小程序无关,是css的知识 使用flex纵向布局,让scroll-view占满剩余高度 布局示例 <view class="main"> <view class="title"></view> <scroll-view scroll-top="scrollTop" scroll-y="true" class="scroll-view" @scrolltolower="handleScrollToLower" > </scroll-view> </vie...
我们把容器变成一个伸缩盒子,即display:flex,再把左边scroll-view(伸缩盒子的子项)的flex设置为2,右边的scroll-view(伸缩盒子的子项)设置为5,伸缩盒子子项的高度默认值是100%。 注意:对于普通数组,wx:key为*this,普通数组中的每一项用item表示 每一项就是一个view,设置高度为80rpx,字体为30rpx,将该容器view定...
小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分: 1.scroll-view 中的需要滑动的元素不可以用 float 浮动; 2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的; 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排; 4.包裹 scroll-view...
然后我发现,我的元素排版有问题,我这里想用 display: flex 进行布局,发现微信开发者工具的控制台给出了警告,警告是内容是[pages/index/index] 设置 enable-flex 属性以使 flexbox 布局生效。说明一个问题,我们想使用 flex 布局就需要告诉 scroll-view 开启这个 flex 布局,我们就再加一下吧~。 <scroll-view cla...
display:block指定为块内容器模式,总是使用新行开始显示,微信小程序的视图容器(view,scroll-view和swiper)默认都是dispaly:block。 display:flex:指定为行内容器模式,在一行内显示子元素,可以使用flex-wrap属性指定其是否换行,flex-wrap有三个值:nowrap(不换行),wrap(换行),wrap-reverse(换行第一行在下面) ...
编写完成之后就实现如图的flex横向布局效果: 3、scroll-view 组件的基本使用 可以基于刚才的效果来实现元素纵向滚动效果。注意:这里要使用纵向滚动时,必须给scroll-view一个固定高度,同理横向滚动也是需要一个固定宽度。 scroll-y属性:允许纵向滚动; ...
.main {height: 100%;display:flex;flex-direction: column; // 竖向排列}.title{height: 100rpx;}.scroll-view {flex: 1; // 撑满剩余高度height: 0; // 关键属性,否则scroll-view不生效} 关键属性是height: 0,如果没有该属性,高度会溢出,不会出现滚动效果 ...
第二种情况,scroll-view自适应页面剩余高度 xml文件 <view class="box"> <view class="box-head"></view> <scroll-view class="box-scroll"></scroll-view> </view> wxss文件 .box { display: flex; flex-direction:column; height:100vh;
1、给 scroll-view 加width: 100%;white-space: nowrap;子元素必须设置display: inline-block2、使用 flex 布局,观看第二点 2、flex布局问题 代码语言:javascript 代码运行次数:0 复制 Cloud Studio代码运行 <scroll-view scroll-xclass="navScroll"enable-flex>...</scroll-view> 代码语言...
其中display:flex表示弹性布局,flex是Flexible的缩写。 如果class属性需要指定多个样式,样式直接用空格分隔,代码如下: 1 <view class="flex-item bc_green"></view> 其中flex-item的代码如下: 1 2 3 4 .flex-item{ width: 100px; height: 100px; ...