uni-app 输入框软键盘把背景图顶上来
1、demo.vue
<template>
<view class="container" :style="'height:'+screenHeight+'px !important;'">
<view class="welcome">
<view>您好，</view>
<view>欢迎登录。</view>
</view>
<form @submit="formSubmit" @reset="formReset">
<view class="form_view">
<view class="input-view">
<view class="label-view">
<view class="icon iconfont iconicon_patriarch"></view>
</view>
<input class="input" type="text" placeholder="请输入账号" placeholder-style="color:#999999;font-size:30upx" v-model="nameValue" />
</view>
<view class="input-view">
<view class="label-view">
<view class="icon iconfont iconicon_little_taget"></view>
</view>
<input class="input" type="text" placeholder="请输入密码" placeholder-style="color:#999999;font-size:30upx" v-model="passwordValue" />
</view>
</view>
</form>
<view class="button-view">
<button :loading="loading" class="login" formType="submit">登录</button>
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
nameValue: '',
passwordValue: '',
screenHeight: '',
loading: false
}
},
methods: {
},
onReady() {
},
onLoad() {
this.screenHeight = uni.getSystemInfoSync().windowHeight;
}
}
</script>
<style>
@import '../static/css/demo.css';
</style>
将demo.css放入static里的css文件中
在demo.css中的背景图换成你项目中需要的背景图即可
2、demo.css
page{
width: 100%;
height: 100%;
}
.container{
width: 100%;
height: 100%;
min-height: 100%;
background: url(demo.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
.welcome{
width: 214upx;
height: 106upx;
margin: 0 auto;
margin-left: 50upx;
padding-top: 150upx;
}
.input-view{
width: 650upx;
height: 57upx;
display: flex;
align-items: center;
border-bottom: 1upx solid #dddddd;
margin: 60upx auto;
}
.input-view input{
margin-left: 20upx;
}
.input-view .icon{
color: #bbbbbb;
}
.placeholderStyle{
font-size: 30upx;
color: #999999;
}
.form_view{
width: 650upx;
height: 176upx;
margin: 105upx auto;
}
button{
width: 560upx;
height: 90upx;
font-size: 48upx;
color: #fffefe;
display: flex;
align-items: center;
justify-content: center;
background: #3196fb;
box-shadow: 0 0 10upx rgba(49,150,251,0.3);
}
.dns{
color: #FFFFFF;
font-size: 24upx;
width: 710upx;
text-align: right;
position: absolute;
bottom: 30upx;
}
uni-app 输入框软键盘把背景图顶上来相关推荐
- uni-app 输入框键盘把背景图顶上去
前言 基于 uin-app 开发h5应用,某页面有个 input 如输入框,input框输入时软键盘会把页面背景图顶上去. 解决方案–把页面高度定成视口高度 <template><v ...
- 解决Android软键盘弹出覆盖h5页面输入框问题 // 在ios系统中输入框软键盘消失后，页面不回弹的问题 // 解决苹果不回弹页面 // 微信环境打开
//解决Android软键盘弹出覆盖h5页面输入框问题 window.addEventListener('resize', () => {if (document.activeElement.t ...
- H5页面 解决移动端输入框键盘弹起背景图
解决原理:键盘弹出时,设置背景图下移:键盘关闭时,设置背景图复原 背景图的css .login-bg img{width: 100%;object-fit:cover;position: fixed; ...
- android 键盘遮盖输入框_android弹出输入框,软键盘挡住部分编辑框
公司要做一款类似微信的即时通讯app 现有如下需求: 当edittext获取到焦点,弹出输入框,并且将listview(recyclerview)顶上去 类似微信QQ的效果,如下图所示 editTex ...
- WebView输入框软键盘遮挡问题（沉浸状态栏和adjustResize的冲突）
[WebView为什么没有在软键盘弹出时更新布局] 默认Activity情况下,软键盘弹出时,通过给DecorView的LinearLayout添加"layout_margin_bottom ...
- vue 安卓输入框软键盘导致界面样式错乱
在mounted中写 var _body = document.getElementsByTagName("body")[0];_body.style.height = _body ...
- android 键盘将底部视图顶起,android 弹出软键盘将底部视图顶起问题
今天要做一个搜索功能,搜索界面采用AutoCompleteTextView做搜索条,然后下面用listview来显示搜索结果,而我的主界面是在底 部用tab做了一个主界面导航,其中有一个搜索按钮,因为 ...
- 软键盘弹出将布局顶上去
软键盘弹出将底部布局顶上去: android:windowSoftInputMode="adjustResize" 软键盘弹出不让底部布局顶上去: android:windowSo ...
- ios12微信H5输入框软键盘关闭后，页面无法回到正常位置
IOS12在开发微信公众号时遇到input输入框,失去焦点,键盘收回后,input框的位置改变的情况,需要监听失焦事件,并重新设定高度来解决这个问题: $("input").blu ...
最新文章
- 寄存器映射与直接操作寄存器
- js设计模式每次10分钟:字面量和构造函数模式对比
- cocos2d 屏幕適配_Cocos2d-x 3.1 一步步做屏幕适配
- 两个简单的Demo示例向读者展示Flash和ASP.NET交互原理以及过程
- mysql慢查询的使用_mysql慢查询使用详解
- 有向无环图描述表达式
- linux 系统命令启动,Linux开关机及系统进程命令
- 一个互联网电话公司对全球商务有什么样的影响？
- Matlab学习第一部分：基础知识
- x220linux蓝牙驱动,ThinkPad X230 Bluetooth 蓝牙驱动程序下载(Windows 7/Vista)
- 虚拟服务器不识别网银盾,建行u盾插电脑没反应网页不自动跳出 3步教你快速解决...
- 【学习笔记】福州大学网络课程 网络空间安全概论(1,4)
- mysql数据库查询优化技术 视频_那海蓝蓝 MySQL数据库查询优化技术视频教程
- 海贝思蓝牙接收器Linux,特定场景使用测评，电视民工的海备思蓝牙X2发射接收器使用心得。...
- 在个人计算机系统中 常见外存储器有(),内蒙古事业单位专业知识计算机考试题库：计算机基础练习题(22)...
- Oracle序列的创建和使用
- ABP Vnext 学习01-创建项目 并初始化Mysql数据库
- 小程序流量主能赚多少_微信：6月1日起调整小程序和公众号流量主广告收入分成比例...
- 基于51单片机驱动A4988实现步进电机逆时针转动
- go-colly入门+案例