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 ...
最新文章
- Backbone.js学习笔记 Hello World!
- 面试京东Java架构师，竟然被问这些题，学到了！
- Linux下查看在运行进程的命令
- JPA + EclipseLink + SAP云平台 = 运行在云端的数据库应用
- 2020牛客国庆集训派对day1 C. Bob in Wonderland
- java学习（82）：静态代码块内部类
- Java基本数据类型及其包装类
- selenium 定位方式4-xpath
- 区块链软件开发：区块链+餐饮
- Python3.6机器学习sklearn中导入train_test_split库出错“Unresolved reference ‘train_test_split’”
- Hadoop高级培训课程大纲-开发者版
- android 点击事件失效,安卓手机微信自带浏览器点击事件失效解决
- CTFshow web入门——php特性
- 百度卫士+7654联盟
- 强化学习基本概念及方法分类
- MySQL数据仓库基础
- LLDP协议、STP协议 笔记
- P1551 亲戚 并查集
- 谷歌浏览器 android4.4,谷歌发布移动版Chrome浏览器仅限Android4.0
- A Hybrid ℓ1-ℓ0 Layer Decomposition Model for Tone Mapping