微信小程序输入框键盘显示时，上推固定在底部的按钮

记录一下在学习中遇到的问题，如果错误还请指正！！！

当按钮固定在了底部，点击输入框时，键盘就把底部的按钮覆盖掉。有的时候想让它被键盘上推，就需要这样来实现了。

//JS代码
data: {bottom: 0,isBlur: true,blurBottom: 0,goods_name: "",
},
//输入框聚焦时触发事件
onFoucs (e:any) {this.setData({bottom: e.detail.height,isBlur: false})
},
//输入框失焦时触发事件
onBlur(){this.setData({isBlur: true})
},

视图层以van-field为例子

<van-fieldmodel:value="{{ goods_name }}"label="商品名称"placeholder="请输入商品名称"bind:focus="onFoucs"bind:blur="onBlur"/>
<van-button type="primary" size="large" custom-style='position:fixed;width:100%;bottom:{{isBlur ? blurBottom : bottom}}px;' >保存</van-button>

van-button就是按钮，其中style里的position:fixed是让按钮位置固定。

bottom:{{isBlur ? blurBottom : bottom}}px是规定按钮里屏幕底部的距离

其他应用就自行添加啦！

微信小程序输入框键盘显示时，上推固定在底部的按钮相关推荐

安卓和iOS的兼容性问题：键盘弹起时，固定在底部的按钮是否被弹到键盘上方
问题描述: iOS不存在固定在底部的按钮被键盘弹起的问题,该问题出现在安卓手机上,如下图解决方法: 1. 当键盘弹起时可以监听窗口变化(window.onresize 监听窗口变化) 2. 窗口发生 ...
微信小程序使用image组件时图片不显示的一个解决方法
第一次写博客: 图片链接可正常访问,但是使用组件时,图片不显示,偶然之间尝试到了一种解决方法,我使用的是微信小程序云端,读取本地图片时使用了具体的路径,错误用法如下如果按照指示\ 一级一级选下来,导 ...
微信小程序输入框会字体显示不全或者换行
微信小程序输入框会字体显示不全或者换行问题描述有的时候不同的设备上会出现微信小程序输入框表现不一致,比如:换行,字体显示不全解决方案用开发者工具调试发现,input,textarea 有默认的 ...
微信小程序输入框input
微信小程序输入框input 属性名类型默认值说明 value String 输入框的内容 type String text input的类型,有效值:text,number,idcard,dig ...
微信小程序关于键盘行为的探索
模拟微信朋友圈评论功能,如图: 首先考虑键盘将输入框顶起来,使得输入框正好在键盘上方解决办法:fixed定位,将输入框定位在页面最下,键盘升起时会自动将输入框顶起来于是有了这么一个demo: 有几 ...
小程序中里的bindinput_微信小程序输入框input
微信小程序输入框input 属性名类型默认值说明 valueString 输入框的内容 typeStringtextinput的类型,有效值:text,number,idcard,digit,time ...
微信小程序输入框属性 cursor-spacing 问题
微信小程序输入框属性 cursor-spacing 问题问题描述微信小程序给输入框提供了属性 cursor-spacing,用处是聚焦时光标离软键盘的距离,但是在安卓机子上会出现不太好使,比如,没 ...
uni-app分割线微信小程序端不显示
uni-app分割线微信小程序端不显示文章目录 uni-app分割线微信小程序端不显示问题描述解决方案问题描述做项目时,遇到一个问题: 自定义的分割线组件在web端能显示,在微信小程序端却不 ...
微信小程序点播插件_微信小程序 wxParse插件显示视频问题
修改wxParse/html2json.js 文件 ,在 html2json(html, bindName)方法里 var node = { node: 'element', tag: tag, }; ...

微信小程序输入框键盘显示时，上推固定在底部的按钮

微信小程序输入框键盘显示时，上推固定在底部的按钮相关推荐

最新文章

热门文章