实现微信小程序输入框输入时页面不上移【完美 ~

之前做过的小程序里面这种功能不是太重要，所以有点小瑕疵也一直没去理它。但是这次的小程序有一个话题评论功能，要求比较高，查csdn翻文档好半天终于实现了

第一步：输入框固定在页面底部 + 适配底部安全区

<view class="bottom-view"><view class="bottom-input" style="padding-bottom: {{inputBottom}}rpx;"><textarea v-model="myComment" :maxlength="-1" :adjust-position="false" :auto-height="true" :fixed="true" confirm-type="done" :hold-keyboard="true" @focus="inputFocus" @blur="inputBlur" @confirm="inputConfirm" :placeholder="placeholder" @keyboardheightchange="keyboardheightchang"/></view>
</view>

 // 适配的底部外容器.bottom-view{position: fixed;z-index: 99999;bottom: 0;padding-bottom: env(safe-area-inset-bottom);}.bottom-input{background-color: #FFFFFF;border-top: 1px solid #f5f5f5;width: 100vw;padding: 30rpx;}

第二步：固定页面 + 将输入框顶起来显示在软键盘上方 textarea文档

将textarea的adjust-position属性置为false 保证页面不移动

监听键盘高度，将输入框顶起

keyboardheightchang(e){this.inputBottom = e.detail.height * this.proportion + 20
},

其实也没辣么难 =v=

实现微信小程序输入框输入时页面不上移【完美 ~_~】相关推荐

web和微信小程序input输入时禁止输入中文方法
前言:作为一个小白--,每天进步一点点,每天总结一点点,生活就会美好一点- -------------------------------- 进入正文 1.首先禁止输入中文就需要用到正则表达式: 2. ...
微信小程序输入框输入换行
今天的每日一测,更新文本输入框中输入换行的问题. 最近在做微信小程序项目的测试,因为输入框中输入换行的问题导致项目上线后出现bug. 具体情况是,在某些文本输入框中,我想到了测试输入换行是否能提交成功 ...
微信小程序-输入框输入文字后，将光标移到文字中间，接着输入文字后光标又自动跳到最后...
问题描述: input输入框输入一段文字后,将光标移到文字中间,接着输入文字后光标又自动跳到最后去了. 原因: input事件中,给input框绑定任何事件后,在处理事件时 setData之后就会让光 ...
微信小程序，输入时键盘弹起，聊天输入框自动弹起，内容不顶起
先看效果代码: index.js const app = getApp() Page({data:{statsuBarHeight: app.globalData.statsuBarHeight,h ...
解决微信小程序输入框聚焦时内容被上推致布局错乱
第一张是正常的未聚焦状态,第二张是滚动后聚焦,文字跑上面去了.解决:页面使用ScrollView组件,设置 overflowY:auto: minheight:100vh overflowX:hidd ...
微信小程序返回上一级页面时刷新页面
问题描述: 微信小程序返回上一级页面时需要重新加载一下数据问题解决: 方法一: 在需要返回的页面的onShow(){}方法中调用要刷新数据的方法方法二: goBack(){let pages = ...
微信小程序输入框input
微信小程序输入框input 属性名类型默认值说明 value String 输入框的内容 type String text input的类型,有效值:text,number,idcard,dig ...
小程序中里的bindinput_微信小程序输入框input
微信小程序输入框input 属性名类型默认值说明 valueString 输入框的内容 typeStringtextinput的类型,有效值:text,number,idcard,digit,time ...
解决微信小程序银行卡号输入转换格式
解决微信小程序银行卡号输入转换格式问题 ps:2017-02-17 19:44 (发现新bug,暂已解决优化中) 新手第一次写博客,请多多见谅! (感觉会有更好的办法,希望有大牛能对我指点指点) 输入 ...

实现微信小程序输入框输入时页面不上移【完美 ~_~】

实现微信小程序输入框输入时页面不上移【完美 ~_~】相关推荐

最新文章

热门文章