微信小程序开发交流qq群 173683895
承接微信小程序开发。扫码加微信。
正文:
左边扫码随时向我提问,上方有QQ群,有兴趣的可以加!!!
我在开发过程中,遇到了一些常见的问题,希望通过这篇文件帮助大家避坑···
问题与解决方法:
1.写输入框的时候,想实时获取输入框的焦点
用到的事件和属性:
bindfocus | EventHandle | 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持 |
bindblur | EventHandle | 输入框失去焦点时触发,event.detail = {value: value} |
解决方法:在input写上面的两个事件,然后setData .
代码:
<input type="text" bindblur='no_focus' bindfocus="focus" />
// 获取到焦点
focus:function(e){
var that = this;
console.log(e.detail.height)
this.setData({
focus: true,
input_bottom: e.detail.height
})
},
// 失去焦点
no_focus: function (e) {
this.setData({
focus: false
})
},
2.用户在使用输入框时手机输入法的键盘会往上划动,导致页面错乱或者闪屏。
用到的事件和属性:
adjust-position | Boolean | true | 键盘弹起时,是否自动上推页面 |
bindfocus | EventHandle | 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持 |
解决方案:组件键盘自动上推,然后获取手机键盘的高度,使用定位解决。
解决方法:给 input 添加 bindfocus 事件并添加 adjust-position='{{false}}' 属性, 通过bindfocus事件获取到输入框的高度,然后再给输入框绝对定位,距离底部的高度登录获取到的高度。
代码:
<input style='position: absolute; bottom:{{input_bottom}}px' type="text" adjust-position='{{false}}' bindfocus="focus" />
focus:function(e){
console.log(e.detail.height)
this.setData({
focus: true,
input_bottom: e.detail.height
})
},
3.用户在使用键盘时,键盘顶部将输入框底部的边框遮挡了,导致下边框消失
用到的时间和属性:
cursor-spacing | Number | 0 | 指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 |
解决方法:通过 cursor-spacing 调整键盘与输入框的距离。
代码:
<input type="text" cursor-spacing='5' />
input很简单? 呵呵!!!