微信小程序使用scroll-view的布局方法
目录
微信小程序使用scroll-view的布局方法
最近在做微信小程序的时候用到了scroll-view这个组件，官方文档表明在使用竖向滚动时，需要给组件一个固定高度，但是在实际应用时需要自适应高度，需求如下。
需求
- 顶部搜索框固定高度；
- scroll-view部分自适应高度滚动；
解决办法
在开发的时候是在js中用窗口高度减去已知固定高度，再赋值给scroll-view组件，但是出现了在部分手机上出现滚动条或者无法铺满屏幕的问题，在求助网友之后，得到了几种解决办法，一一测试过，都是好用的，再次记录一下。
wxml结构如下
<view class="container">
<view class="search-wrapper">
这里是搜索框
</view>
<scroll-view class="scrollView-wrapper" scroll-y="true">
<view>复健科熊家符合胡荣海可敬的防护UI人埃及覅合家福我看得见覅阿牛见覅积分为我埃及覅就爱润肺久见覅爱抚你自己覅诶IEu菲欧自己覅诶恶魔女阿努OK骄傲诶覅</view>
<view>复健科熊家符合胡荣海可敬的防护UI人埃及覅合家福我看得见覅阿牛见覅积分为我埃及覅就爱润肺久见覅爱抚你自己覅诶IEu菲欧自己覅诶恶魔女阿努OK骄傲诶覅</view>
<view>复健科熊家符合胡荣海可敬的防护UI人埃及覅合家福我看得见覅阿牛见覅积分为我埃及覅就爱润肺久见覅爱抚你自己覅诶IEu菲欧自己覅诶恶魔女阿努OK骄傲诶覅</view>
<view>复健科熊家符合胡荣海可敬的防护UI人埃及覅合家福我看得见覅阿牛见覅积分为我埃及覅就爱润肺久见覅爱抚你自己覅诶IEu菲欧自己覅诶恶魔女阿努OK骄傲诶覅</view>
<view>复健科熊家符合胡荣海可敬的防护UI人埃及覅合家福我看得见覅阿牛见覅积分为我埃及覅就爱润肺久见覅爱抚你自己覅诶IEu菲欧自己覅诶恶魔女阿努OK骄傲诶覅</view>
<view>复健科熊家符合胡荣海可敬的防护UI人埃及覅合家福我看得见覅阿牛见覅积分为我埃及覅就爱润肺久见覅爱抚你自己覅诶IEu菲欧自己覅诶恶魔女阿努OK骄傲诶覅</view>
<view>复健科熊家符合胡荣海可敬的防护UI人埃及覅合家福我看得见覅阿牛见覅积分为我埃及覅就爱润肺久见覅爱抚你自己覅诶IEu菲欧自己覅诶恶魔女阿努OK骄傲诶覅</view>
<view>复健科熊家符合胡荣海可敬的防护UI人埃及覅合家福我看得见覅阿牛见覅积分为我埃及覅就爱润肺久见覅爱抚你自己覅诶IEu菲欧自己覅诶恶魔女阿努OK骄傲诶覅</view>
<view>复健科熊家符合胡荣海可敬的防护UI人埃及覅合家福我看得见覅阿牛见覅积分为我埃及覅就爱润肺久见覅爱抚你自己覅诶IEu菲欧自己覅诶恶魔女阿努OK骄傲诶覅</view>
<view>复健科熊家符合胡荣海可敬的防护UI人埃及覅合家福我看得见覅阿牛见覅积分为我埃及覅就爱润肺久见覅爱抚你自己覅诶IEu菲欧自己覅诶恶魔女阿努OK骄傲诶覅</view>
<view>复健科熊家符合胡荣海可敬的防护UI人埃及覅合家福我看得见覅阿牛见覅积分为我埃及覅就爱润肺久见覅爱抚你自己覅诶IEu菲欧自己覅诶恶魔女阿努OK骄傲诶覅</view>
<view>复健科熊家符合胡荣海可敬的防护UI人埃及覅合家福我看得见覅阿牛见覅积分为我埃及覅就爱润肺久见覅爱抚你自己覅诶IEu菲欧自己覅诶恶魔女阿努OK骄傲诶覅</view>
<view>复健科熊家符合胡荣海可敬的防护UI人埃及覅合家福我看得见覅阿牛见覅积分为我埃及覅就爱润肺久见覅爱抚你自己覅诶IEu菲欧自己覅诶恶魔女阿努OK骄傲诶覅</view>
<view>复健科熊家符合胡荣海可敬的防护UI人埃及覅合家福我看得见覅阿牛见覅积分为我埃及覅就爱润肺久见覅爱抚你自己覅诶IEu菲欧自己覅诶恶魔女阿努OK骄傲诶覅</view>
</scroll-view>
</view>
复制代码以下css代码都在page高度为100%的基础上使用
flex布局
.container {
height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.search-wrapper {
flex: 0 0 80rpx;
height: 80rpx;
}
.scrollView-wrapper {
flex: 1;
overflow: hidden;
}
复制代码注意，一定要使用overflow: hidden; 我觉得overflow实在是太强大，我觉得我还需要再研究一下它的用法。
定位
.container {
position: relative;
height: 100%;
box-sizing: border-box;
}
.search-wrapper {
height: 80rpx;
}
.scrollView-wrapper {
position: absolute;
top: 80rpx;
bottom: 0;
}
复制代码calc()函数计算高度
.container {
height: 100%;
box-sizing: border-box;
}
.search-wrapper {
height: 80rpx;
}
.scrollView-wrapper {
height: calc(100% - 80rpx);
/* height: calc(100vh - 80rpx); */
}
复制代码容器使用padding-top
.container {
height: 100%;
padding-top: 80rpx;
box-sizing: border-box;
}
.search-wrapper {
position: fixed;
top: 0;
width: 100%;
height: 80rpx;
}
.scrollView-wrapper {
height: 100%;
}
复制代码这是第一次写文章记录，本来想多写点儿啥，但是也不知道写啥，就这样写干货吧。希望以后能越来越好！！！