获取键盘高度不准确
2019-03-15 18:16:34
微信公开课小程序热门讨论关于「获取键盘高度不准确」的小程序开发问题
补充:试图让底部的按钮悬浮在键盘上方,在基础机型上获取的键盘高度是准确的,但是在一些全面屏手机比如iPhoneX或者小米8上都很不理想个人认为小程序似乎没有计算全面屏中键盘下方的高度有什么办法可以获取所有手
展开:试图让底部的按钮悬浮在键盘上方,在基础机型上获取的键盘高度是准确的,但是在一些全面屏手机比如iPhoneX或者小米8上都很不理想个人认为小程序似乎没有计算全面屏中键盘下方的高度有什么办法可以获取所有手机上准确的键盘高度吗备注:我希望让按钮或者view悬浮在键盘上方,已知input中可以设置cursorspacing属性即速小程序:刚刚完成了一种比较满意的实现方式,步骤如下:1设置input的cursorspacing,比如140<inputcursorspacing=1402底部放置一个按钮,然后在页面上加入一个隐藏的按钮,该按钮是底部按钮在键盘弹出时的副本;并且这个隐藏按钮只有在键盘弹起时显示,而底部按钮只有在键盘隐藏时显示这个隐藏按钮距离input组件的纵向距离是固定的,等于cursorspacing的值值减去该按钮高度这样该键盘显示时就正好在键盘上方,而不用考虑键盘的高度<blockwx:if={{keyboardPopUp}}<viewclass=keyboardbuttonanimation={{animation}}继续<view<block<blockwx:else<viewdataid=login_button_10class=bottombuttonbindtap=clickLoginButton继续<view<block3但是如果要完成和键盘一起弹出和收起的动画的话,就不能让该隐藏按钮直接在键盘上方显示,需要将隐藏按钮到input的距离设置的更大,同时在键盘弹出时,加上上移的动画;收起时,加上下移的动画inputFocus(e){consolelog(inputFocus:+JSONstringify(e));thissetData({keyboardPopUp:true})thisanimationtranslateY(150)step({duration:250});thissetData({animation:thisanimationexport()});},inputBlur(e){consolelog(inputBlur:+JSONstringify(e));thisanimationtranslateY(0)step({duration:350});thissetData({animation:thisanimationexport()});thissetData({keyboardPopUp:false})}备注:由于从检测到键盘弹出事件到动画响应有一点时间间隔,你会发现该按钮和键盘弹出并不是完全同步的,有一定的时间差目前效果只做到这里,如果有更好的方式,欢迎继续回答:可以针对全面屏增加底部高度~
更多有关「获取键盘高度不准确」的讨论可以前往微信公开课小程序参与互动哦!
补充:试图让底部的按钮悬浮在键盘上方,在基础机型上获取的键盘高度是准确的,但是在一些全面屏手机比如iPhoneX或者小米8上都很不理想个人认为小程序似乎没有计算全面屏中键盘下方的高度有什么办法可以获取所有手
展开:试图让底部的按钮悬浮在键盘上方,在基础机型上获取的键盘高度是准确的,但是在一些全面屏手机比如iPhoneX或者小米8上都很不理想个人认为小程序似乎没有计算全面屏中键盘下方的高度有什么办法可以获取所有手机上准确的键盘高度吗备注:我希望让按钮或者view悬浮在键盘上方,已知input中可以设置cursorspacing属性即速小程序:刚刚完成了一种比较满意的实现方式,步骤如下:1设置input的cursorspacing,比如140<inputcursorspacing=1402底部放置一个按钮,然后在页面上加入一个隐藏的按钮,该按钮是底部按钮在键盘弹出时的副本;并且这个隐藏按钮只有在键盘弹起时显示,而底部按钮只有在键盘隐藏时显示这个隐藏按钮距离input组件的纵向距离是固定的,等于cursorspacing的值值减去该按钮高度这样该键盘显示时就正好在键盘上方,而不用考虑键盘的高度<blockwx:if={{keyboardPopUp}}<viewclass=keyboardbuttonanimation={{animation}}继续<view<block<blockwx:else<viewdataid=login_button_10class=bottombuttonbindtap=clickLoginButton继续<view<block3但是如果要完成和键盘一起弹出和收起的动画的话,就不能让该隐藏按钮直接在键盘上方显示,需要将隐藏按钮到input的距离设置的更大,同时在键盘弹出时,加上上移的动画;收起时,加上下移的动画inputFocus(e){consolelog(inputFocus:+JSONstringify(e));thissetData({keyboardPopUp:true})thisanimationtranslateY(150)step({duration:250});thissetData({animation:thisanimationexport()});},inputBlur(e){consolelog(inputBlur:+JSONstringify(e));thisanimationtranslateY(0)step({duration:350});thissetData({animation:thisanimationexport()});thissetData({keyboardPopUp:false})}备注:由于从检测到键盘弹出事件到动画响应有一点时间间隔,你会发现该按钮和键盘弹出并不是完全同步的,有一定的时间差目前效果只做到这里,如果有更好的方式,欢迎继续回答:可以针对全面屏增加底部高度~
更多有关「获取键盘高度不准确」的讨论可以前往微信公开课小程序参与互动哦!
标签:微信公开课,小程序
「获取键盘高度不准确」热门讨论订阅
方法1:微信扫描微信公开课小程序码即可订阅热门讨论「获取键盘高度不准确」
方法2:微信搜索微信公开课小程序名称进入,即可订阅热门讨论「获取键盘高度不准确」
方法3:微信网页访问即速商店,长按识别微信公开课小程序码即可订阅热门讨论「获取键盘高度不准确」
微信公开课小程序热门讨论「获取键盘高度不准确」由微信公开课原创摘录于微信小程序商店shop.jisuapp.cn,转载请注明出处。
微信公开课热门讨论「获取键盘高度不准确」由微信公开课开发者向微信用户提供,并对本服务内容、数据资料及其运营行为等真实性、合法性及有效性承担全部责任。
微信公开课小程序
更新时间:2019-03-15 18:16:34
>
__methodCallerx27;ofundefined
>-404011cloudfunctionexecutionerror
>,请补充选择商家自营-预付卡销售-发行方类目,并在基础信息处申请该类目,通过
>:host在模拟器中显示无效
>:请在小程序服务页面上架正式(非测试)内容或商品后重新提交审核
>.net 微信小程序 上传图片
>'setTimeout'的问题
>‘三朵里熙SPA主题减压空间’为什么搜索关键词‘三朵里‘搜不到
>‘扫普通链接二维码打开小程序‘中设置为体验版,扫码打开是线上版本
>“cloudfunctions**indexjs”gitignore
>“NO ULINK DEVICE FOUND”是怎么回事
>“万马掌上校园”的类目审核
>“上线了”公司开发的微信小程序怎么样?
>“产品是否一定需要条形码”
>