logo


  • 首页
  • 文章 
    • vue
    • app
    • node
    • 生活
    • 小程序
    • javascript
    • uniapp
  • 案例 
    • app
    • 小程序
    • pc
  • 相册
  • 友链
  • 留言
  • 微语
  • 关于

uniapp点击输入框时键盘不上推页面

 2020-05-29
 椰子皮
 6
 9037
“ 一些输入框固定在页面底部,我们希望键盘弹出的时候,页面不动,输入框挨着键盘,解决键盘弹出遮挡输入框的问题 ”

试了好几种方法,最后只能adjust-position设置为false,然后监听键盘的高度赋值给输入框bottom


这里还一个非常重要的地方,在根元素设置@touchmove.stop.prevent,这样在ios上页面就不会滚动,不影响其他组件内部滚动


onReady() {
  // 监听键盘高度变化,以便设置输入框的高度
  uni.onKeyboardHeightChange(res => {
    this.inputOffsetBottom = res.height
    if (res.height === 0) {
      this.focus = false
    }
  })
},


<input
  v-model="commentValue"
  :style="{bottom: inputOffsetBottom > 0 ? inputOffsetBottom + 'px' : '0'}"
  :disabled="setDisabled"
  :adjust-position="false"
  :cursor-spacing="20"
  :placeholder="placeholderText"
  type="text"
  class="lp-comment-input"
  confirm-type="send"
  @focus="onInputFocus"
  @blur="onInputBlur"
  @confirm="onInputEnter"
  @keyboardheightchange="onKeyBoardHeightChange"
/>



支付宝 微信
 7

app
 element-ui使用axios进行全局控制loading
 uniapp或小程序利用canvas生成圆图
共有 6 条评论
 发表评论
  • 10066#
    Alanlee
    Alanlee
    •  2020-07-14
    •  广东省深圳市福田区
    •  Win7
    你好,我想问下我在onLoad函数用了uni,onKeyboardHeightChange方法,在hbuilder调试是可以的,但是打包成app之后完全没有监听到,请教一下是为什么?
    椰子皮
     椰子皮 2020-07-14 回复 @Alanlee
    应该不会吧,hbuilder是不是最新的,放在onReady试试
  • 10067#
    Alanlee
    Alanlee
    •  2020-07-14
    •  广东省深圳市福田区
    •  Win7
    还是不行,是不是要用@keyboardheightchange="onKeyBoardHeightChange"这个属性方法?但是我看文档,
    这个@keyboardheightchange方法好像支持小程序,我的是app(ios以及android端的)
    椰子皮
     椰子皮 2020-07-14 回复 @Alanlee
    我的是也是app,现在都没什么问题,是不是编译版本不对?v3?
  • 10068#
    Alanlee
    Alanlee
    •  2020-07-14
    •  广东省深圳市福田区
    •  Win7
    这个项目没有v3编译版本,我的是app的android机型测出来不行
  • 10073#
    歌尽花颜
    歌尽花颜
    •  2021-02-24
    •  吉林省长春市
    •  Win10
    @touchmove.stop.prevent怎么加在根元素上呀?.prevent不是只支持H5的吗?
    椰子皮
     椰子皮 2021-03-01 回复 @歌尽花颜
    加在templete里面的第一个元素上面
  • 10079#
    undefined
    undefined
    •  2022-02-21
    •  上海市上海市虹口区
    •  Win10
    h5也不支持keyboardheightchange
  • 10086#
    Javascript
    Javascript
    •  2022-07-11
    •  Win10
    h5上推页面用这个方法解决不了



表情
 不支持canvas
椰子皮
椰子皮
觉得不错就点个赞吧
 234
 关注 公众号
1772 运行天数
122 今日pv
61 文章数量
 最近更新
 2022-06-02 09:25 更新了 文章
 nuxt3配置多环境变量

 最新微语
  • 最近在使用eeg.js + vue3.0 2022-01-12
  • 把清新风格改为毛玻璃效果,虽然有点卡,但 2020-05-31
  • 本站春季主题已完成,大家觉得怎样。 2020-03-15
 最新评论
  • Javascript
    Javascript Win10 2022-07-11
    文章 h5上推页面用这个方法解决不了
  • Sonder
    Sonder Win10 2022-07-06
    文章 基础问题,刚刚的问题解决了。是baseurl没弄好~~
  • tsin
    tsin Win10 2022-06-13
    文章 请求接口在控制台看不到返回数据是怎么回事呢 显示的是无法加载响应数据,返回的状态代码是200
 最多点赞
 最多评论
  • vue3.0+typescript使用tinymce富文本编辑器
    vue3.0+typescript使用tinymce富文...
    2020-06-09 赞:25
  • 全新椰子皮博客版本介绍及说明。
    全新椰子皮博客版本介绍及说明。...
    2017-11-23 赞:20
  • vuex action 与mutations 的区别
    vuex action 与mutations 的区别...
    2018-06-24 赞:18
  • 让height:auto有过度效果
    让height:auto有过度效果...
    2017-12-22 赞:
  • css3使用transform: scale 元素出现偏移
    css3使用transform: scale 元素出现偏...
    2018-03-10 赞:
  • 结合lazyload实现文章页里面的图片预加载
    结合lazyload实现文章页里面的图片预加载...
    2017-10-05 赞:
 标签
前端 算法 uniapp javascript typescript 小程序 app vue nuxt node
 友情链接
申请
Sonder mashihuan Khari & Yaru 美好记忆 帅气的木木 大蒜博客 Aquan 快乐编程 fivewoods Paul 贺德强 太傅博客 梁巨才博客 jielin littlewin IT技术宅
首页 申请友链 关于本站
CopyRight © 2016-2021 - 椰子皮 - 浙ICP备16003960号