4388关注13641浏览
设置input组件的ajust-positon属性后,当键盘弹起后,页面高度为变化
- 预期表现
当键盘弹起后,页面高度变小
- 复现路径
- 提供一个最简复现 Demo
组件代码:
/**
* @description 设置密码
* @author kygeng
* date: 2018-03-24
*/
Component({})
{
"component": true
}
<view class="abc-set-passwd-wrap">
<view class="header">
<text>设置密码</text>
</view>
<view class="content">
<view class="row">
<view class="input">
<input type="number" placeholder="密码" ajust-position password />
</view>
</view>
<view class="row">
<view class="input">
<input type="number" placeholder="再次输入密码" ajust-position password />
</view>
</view>
</view>
<view class="footer">
<view class="btn-pre" bindtap="onPre">
上一步
</view>
<view class="btn-next" bindtap="onNext">
下一步
</view>
</view>
</view>
.abc-set-passwd-wrap {
position: relative;
width: 100%;
height: 100%;
}
.abc-set-passwd-wrap .header {
padding: 64rpx 44rpx 40rpx 44rpx;
width: 100%;
font-size: 48rpx;
color: #8590a6;
}
.abc-set-passwd-wrap .content {
padding: 0 44rpx;
width: 100%;
}
.abc-set-passwd-wrap .content .row {
display: flex;
align-items: center;
margin-bottom: 32rpx;
width: 100%;
height: 96rpx;
font-size: 28rpx;
border-bottom: 2rpx solid #e6e8ef;
}
.abc-set-passwd-wrap .content .row.active {
border-color: #007abb;
}
.abc-set-passwd-wrap .content .row .input {
flex: 1;
}
.abc-set-passwd-wrap .content .row .input input {
padding: 0;
}
.abc-set-passwd-wrap .footer {
position: absolute;
left: 0;
bottom: 0;
padding: 0 44rpx;
width: 100%;
height: 88rpx;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 2rpx s
-
至过去的我
2044人对此回答表示赞同
我是未来的你,你现在是不是在年找寻小程序答案。你不要感觉诧异,给你来信原因,就是让你不在后悔。今天去学习如何推广小程序,相信......点击查看更多> -
Victoria
18人对此回答表示赞同
展开180回复分享发布于 6年前评论(0)
收起评论
-
六神无主
18人对此回答表示赞同
确实是推上去,只是在ios上推上去,android则推不上去,我之前写的一个position:flex在底部的控件,android怎么也推不上去,到最后我都判断平台,然后在android上单改样式了,
展开180回复分享发布于 6年前评论(0)
收起评论
-
Zoe
6人对此回答表示赞同
页面高度不会变化,只是会把页面上推
展开60回复分享发布于 6年前评论(0)
收起评论