ajust-position不起作用,页面高度未变化
发布于 6 年前 作者 gdai 12274 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)

设置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 solid #ddd;

}

.abc-set-passwd-wrap .footer .btn-pre,

.abc-set-passwd-wrap .footer .btn-next {

width: 140rpx;

height: 60rpx;

line-height: 60rpx;

text-align: center;

font-size: 24rpx;

color: #fff;

background-color: #CCE4F1;

border-radius: 8rpx;

}

.abc-set-passwd-wrap .footer .btn-pre {

color: #666666;

background-color: #ffffff;

}

3 回复

页面高度不会变化,只是会把页面上推

确实是推上去,只是在ios上推上去,android则推不上去,我之前写的一个position:flex在底部的控件,android怎么也推不上去,到最后 我都判断平台,然后在android上 单改样式了,

还请指点如何实现图中效果,页面高度设置100%,发现页面并没有被上推

回到顶部