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

第一种情况，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>

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

【狼人杀plus全记录】没有公网IP照样完美解决微信小程序本地测试问题，超简单方法！
前文:在开发微信小程序后台的时候,我们需要使用域名进行跳转访问,按照传统的思路我们的域名只能填写一个公网IP,然而多数情况下我们并没有公网IP 方法非常简单,有两种思路: 第一种,将域名定向到局域网I ...
微信小程序 - 设置图片高度自适应（宽度固定）
我们要放入多张一样宽度不一样高度的图片的时候,我们不能同时都设置固定的高度,这样会使得一些图片被挤压或者有些会出现空白的现象,这些都不能满足我们的需求,所以我来说一下如何实现图片高度自适应. 我们 ...
html微信图片自适应,微信小程序实现图片高度自适应
1. swiper轮播海报通过wx.getSystemInfo接口获取屏幕高度,高度依据图片宽高等比缩放运行于app.js,全局保存 // 设备信息 wx.getSystemInfo({ succe ...
php展示微信图片尺寸,微信小程序实现image图片自适应宽度
本文主要和大家分享微信小程序实现image图片自适应宽度,希望能帮助到大家,首先我们先来了解一下image组件. 一.了解image组件由于image有默认的固定的宽度和高度,这样我们在做图片自适应 ...
微信小程序轮播图片自适应
微信小程序轮播图片自适应 //xml代码 <view class="rotation"><swiper class="home-swiper" ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
解决微信小程序的video元素层级太高无法遮盖问题
解决微信小程序的video元素层级太高无法遮盖和show-play-btn属性失效问题今天在项目中遇到了这个问题,需要在微信小程序中用视频作为背景,微信开发者工具中模拟的没问题,真机调试就发现vid ...
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题项目需求: 一个信息提交页面:有input输入框,有picker选择器遇到的问题: 点击input输入框时,手机自动弹出键盘,但 ...
# 解决微信小程序遮罩层底部页面滚动
解决微信小程序遮罩层底部页面滚动一.wxml文件添加catchtouchmove="move". <view class="" class=" ...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...

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

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

最新文章

热门文章