收藏
回答

ajust-position不起作用,页面高度未变化

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug input ajust-position 客户端 6.6.5 1.9.91

- 当前 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;

}


最后一次编辑于  2018-03-24  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

3 个回答

  • 黄思程
    黄思程
    2018-03-25

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

    2018-03-25
    赞同
    回复
  • 耿凯阳
    耿凯阳
    2018-03-26

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

    2018-03-26
    赞同
    回复
  • 满眼星辰
    满眼星辰
    2018-03-26

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

    2018-03-26
    赞同
    回复