关键属性是height: 0,如果没有该属性,高度会溢出,不会出现滚动效果 还有一个注意的点,要一直向上检查父元素的高度都是height: 100%; 参考 一招搞定微信小程序ScrollView等组件高度自适应 纵向flex布局中高度的问题
首先,不同的手机屏幕的尺寸不同,因此其高度不同,如果我们按照上面的写法,设置了死的高度,效果并不是我们想要的。为了解决这个问题,我们可以通过: //获取屏幕可用高度 let screenHeight = wx.getSystemInfoSync().windowHeight; 先去获取屏幕的高度,然后通过减去除去scroll-view的其他块的固定高度,得到scroll-view的高...
第一种情况,scroll-view占据整屏 scroll-view { height: 100vh; } 第二种情况,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:...
wxml: <scroll-view scroll-y style="height: {{height?height+'px':'auto'}}"> <view class='wwww' id='www'> <view>111</view> <view>111</view> <view>111</view> <view>111</view> <view>111</view> <view>111</view> </view> </scroll-view> css: .wwwwview{height:200rpx; bac...
关键点在于调整 scroll-view 的高度属性，将其设置为父容器的 100%，同时在其包裹容器上启用 Flex 布局，并设置 flex:1 属性。这样，scroll-view 可以根据上下容器内容自适应调整高度，实现高度自适应。实现这一方案后，scroll-view 的高度将完美匹配屏幕尺寸，内容展示不再受限。值得注意的是，在使用 ...
固定一下宽度试试
滑动tab选项卡 高度不能自适应问题 wxml <swiper id="swiper1" bindchange="intervalChange" current="{{mycurrent}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}"> <!--软件著作权--> <swiper-item class="slide-swiper"> <scroll-view scroll-y="{{true}}" style="height: {{clien...
scroll-view高度自适应解决方案 在flex布局中检查scroll-view并不符合要求flex:1也不行,只需要给scroll-view设置高度1px即可 __EOF__
一、把子元素的高度赋给scroll-view 先说一下两个知识点:wx.getSystemInfo()、wx.createSelectorQuery() 二、自适应不同高度的手机