解决微信小程序scroll-view高度自适应问题的方法

最新推荐文章于 2024-06-13 17:37:58 发布

尐、孽障

最新推荐文章于 2024-06-13 17:37:58 发布

阅读量6.7k

点赞数 5

分类专栏：微信小程序文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_48829226/article/details/122455168

版权

微信小程序专栏收录该内容

12 篇文章 1 订阅

订阅专栏

第一种情况，scroll-view占据整屏

html
scroll-view {
 
 height: 100vh;
 
}

第二种情况，scroll-view自适应页面剩余高度

wxml

<view class="box">
 <view class="view"></view>
 <scroll-view class="box-scroll"></scroll-view>
</view>

wxss

box {
 display: flex;
 flex-direction:column;
 height:100vh;
 overflow:hidden;
}
.view {    <!-- 这段可以不用-->
 flex-shrink: 0;
 height: 50px;
}
.box-scroll {
 flex: 1;
 height: 1px;
}

flex：1 高度依然不会自适应加一个默认高度1px就可以自适应了

实际中的使用示例（重点：第七行代码中的style="height: 1px;"）


 <view wx:if="{{sheetid==2}}" class="hxt-flex-fill hxt-flex-column" style="background-color: #fff;">
        <view class="hxt-flex" style="border-bottom: 1rpx solid #eee;padding: 10rpx 30rpx;display: flex;align-items: center;">
            <view class="title">收费项目：</view>
            <view class="hxt-flex-fill" style="color: #00B1FF;" bindtap="sheetproject">选择收费项目</view>
        </view>
        <view class="hxt-flex-fill" style="height: 1px;" >
            <scroll-view style="height:100%" scroll-y enhanced="{{true}}" bounces="{{false}}">
                <view>
                    <view class="hxt-flex" style="border-bottom: 1rpx solid #eee;padding: 10rpx 30rpx;display: flex;align-items: center;">
                        <view class="title">截止日期：</view>
                        <picker mode="date" value="{{date}}" class="hxt-flex-fill" style="color: {{picker?'':'grey'}};" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
                            {{picker?picker:'请选择截止日期'}}
                        </picker>
                    </view>
                    <view class="hxt-flex-column" style="padding: 10rpx 0rpx 10rpx 30rpx;">
                        <view class="hxt-flex">
                            <view class="title hxt-flex-fill">收费明细：</view>
                            <view class="title" style="width: 150rpx;text-align: center;">收费金额</view>
                            <view class="title" style="width: 100rpx;text-align: center;">必交</view>
                        </view>
                        <view class="hxt-flex">
                            <view class="title hxt-flex-fill" style="color: gray;">以下项目由《速达快餐》提供：</view>
                        </view>
                        <checkbox-group bindchange="checkboxChange" style="border-bottom: 1rpx solid #eee;padding-bottom: 10rpx;">
                            <view class="hxt-flex" wx:for="{{2}}" style="margin-top: 10rpx;">
                                <view class="title hxt-flex-fill">
                                    <checkbox class="round sm blue" value="{{objCheck.value(item)}}"></checkbox>
                                    汉族中餐
                                </view>
                                <view class="title hxt-flex" style="width: 150rpx;justify-content: center;">￥<input type="number" placeholder="金额" style="width: 70rpx;text-align: left;color: #00B1FF;" /></view>
                                <view class="title" style="width: 100rpx;text-align: center;">
                                    <i class="fa fa-check" aria-hidden="true" style="color: #00B1FF;"></i>
                                </view>
                            </view>
                        </checkbox-group>
                        <view class="hxt-flex">
                            <view class="title hxt-flex-fill" style="color: gray;">通知对象：</view>
                        </view>
                        <checkbox-group bindchange="checkboxChange" style="border-bottom: 1rpx solid #eee;padding-bottom: 10rpx;">
                            <view class="hxt-flex" wx:for="{{20}}" style="margin-top: 10rpx;">
                                <view class="title hxt-flex-fill">
                                    <checkbox class="round sm blue" value="{{objCheck.value(item)}}"></checkbox>
                                    汉族中餐
                                </view>
                                <view class="title hxt-flex" style="width: 150rpx;justify-content: center;">
                                    <button class="cu-btn shadow" style="width:auto;height: auto;padding:10rpx 30rpx;font-weight: normal;color: gray;" bindtap="Sheet">0/28</button>
                                </view>
                            </view>
                        </checkbox-group>
                        <view>
                            <view style="padding: 20rpx 0;">备注：</view>
                            <textarea maxlength="{{noteMaxLen}}" style="width: 100%;border-top: 1rpx solid #eee;border-bottom: 1rpx solid #eee;padding: 10rpx 0;height: 200rpx;" fixed="true" bindinput="getWords" placeholder="请输入备注。。。" />
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view style="border-top: 1rpx solid #eee;padding: 20rpx 10rpx;text-align: right;">
        <button class="cu-btn shadow" style="width:auto;height: auto;padding:10rpx 30rpx;font-weight: normal;color: white;background-color: #00B1FF;" bindtap="Sheet">保存</button>
        </view>
    </view>