微信小程序输入框上移问题解决
微信小程序的输入框在上面还好,如果不是,在聚焦的时候页面就会上移,上方的页面信息会看不到,影响用户操作
在这里可以手动设置并获取输入框的高度来解决
这种方式虽然有的机子有点卡,但是已经算是比较完美的解决方案了
页面部分
<view class="page-bottom" style="bottom:{{bottom}}px">
<view class="block input-box">
<view class="block-left">
<input bindconfirm="toSubmit"
value="{{code}}"
bindfocus="inputFocus"
bindblur="inputBlur"
focus
adjust-position="{{false}}"
class="block-main"
type="text"
placeholder="手动输入"
confirm-type="go"
cursor-spacing="100"></input>
</view>
</view>
</view>
js部分
inputFocus (e) {
this.setData({bottom: e.detail.height})
},
inputBlur () {
this.setData({bottom: 0})
}
微信小程序输入框上移问题解决的更多相关文章
- 微信小程序支付全问题解决
这几天在做小程序的支付,没有用官方的SDK,这里就纯用官方的文档搞一发. * 注作者使用的PHP,不过支付流程都是这样 开发前必读 主要流程 小程序前端发送求参请求 接受请求封装 "统一下单 ...
- 微信小程序-输入框输入文字后,将光标移到文字中间,接着输入文字后光标又自动跳到最后
问题描述: input输入框输入一段文字后,将光标移到文字中间,接着输入文字后光标又自动跳到最后去了. 原因: input事件中,给input框绑定任何事件后,在处理事件时 setData之后就会让光 ...
- 微信小程序:input输入框和form表单几种传值和取值方式
1.传值:index下标传值.页面navigator传值 1.index下标 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.data ...
- 微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
- 微信小程序 TLS 版本必须大于等于1.2问题解决
微信小程序 TLS 版本必须大于等于1.2问题解决 此问题最近在微信小程序开发中,比较常见. 在解决这个问题之前,我们需要了解一下,当前的系统环境是否支持TLS1.2以上,可以参考一下表格: 确认系 ...
- 微信小程序访问豆瓣api403问题解决方发法
微信小程序访问豆瓣api403问题解决方法一览:通过豆瓣api可以获取很多电影.书籍等的数据信息.昨晚上用微信小程序请求豆瓣api,竟然被豆瓣拒绝了.(豆瓣设置了小程序的访问权限):下面就跟着小编一起 ...
- 绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象)
微信小程序开发文档-组件-swiper后面追加的新闻如上图所示: 如果在bindchange事件给swiper的current属性对应的值{{current}}赋值,就会造成抖动现象. bindcha ...
- 微信小程序之wx.request:fail错误,真机预览请求无效问题解决,安卓,ios网络预览异常
新版开发者工具增加了https检查功能:可使用此功能直接检查排查ssl协议版本问题: 可能原因:0:后台域名没有配置0.1:域名不支持https1:没有重启工具:2:域名没有备案,或是备案后不足24小 ...
- 微信小程序 - 弹出键盘遮挡住输入框
在开发微信小程序的时候遇到,输入用户名或者手机号以及地址,手机键盘调起来,会把输入框遮挡. 如图: 以上两张图是自己工作中遇到的,此处不要着急,一个属性帮你搞定. cursor-spacing:指定光 ...
随机推荐
- webapck搭建环境,让你知道vue中的h函数的作用和虚拟节点如何上树!
搭建环境 npm init 初始化项目 npm i -D snabbdom 安装 npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3 简单介绍 ...
- LightningChart .NET v.10.2.1已经发布了!
LightningChart .NET v.10.2.1已经发布了! 了解更多关于兼容性和优化方面的最新改进. 主要改进 我们很高兴地宣布LightningChart .NET产品系列的第三个主要版本 ...
- 资源的批量删除与替换(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 资源分配好以后,嗯,很满意! 可是!有人看了不满意,或者自己手贱分配错了,要改? 改就改呗,和分配有什么区别吗? 没有啊! ...
- LuoguP7080 [NWRRC2013]Ballot Analyzing Device 题解
Content 有 \(n\) 名选手参加一个比赛,有 \(m\) 个人为他们投票.第 \(i\) 个人的投票情况用一个长度为 \(n\),并且仅包含 . 和 X 两个字符的字符串,其中,如果第 \( ...
- VUE3 之 样式绑定
1. 概述 老话说的好:脚踏实地,从小事做起. 言归正传,今天我们来聊聊 VUE3 的样式绑定. 2. 样式绑定 2.1 样式例子 <style> /* 颜色 */ .color-red ...
- JS将时间戳转换为日期格式
function getDate(time){ var date =(new Date(parseInt(time))).toLocaleDateString() return date; } tim ...
- 【LeetCode】1438. 绝对差不超过限制的最长连续子数组 Longest Continuous Subarray With Absolute Diff Less Than or Equal t
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 滑动窗口 日期 题目地址:https://leetco ...
- 【LeetCode】658. Find K Closest Elements 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/find-k-c ...
- 高并发 IO 模型
五种IO模型包括:阻塞IO.非阻塞IO.IO多路复用.信号驱动IO.异步IO. 阻塞IO模型: 不管是网络IO还是磁盘IO,对于读操作而言,都是等到网络的某个数据分组到达后/数据准备好后,将数据拷贝到 ...
- CoGAN
目录 概 主要内容 代码 Liu M., Tuzel O. Coupled Generative Adversarial Networks. NIPS, 2016. 概 用GAN和数据(从边缘分布中采 ...