网站制作 成功案例,php网站开发目录,机械网站建设公司,wordpress实现选择多标签页效果展示
键盘未弹起时 键盘弹起后#xff1a;
实现方式
话就不多说了 我直接贴代码了 原理就是用你点击的输入框的底部 距离顶部的位置 减去屏幕高度除以2#xff0c;然后设成负值#xff0c;再将这个值给到最外层相对定位的盒子的top属性#xff0c;这样就不会出现顶…效果展示
键盘未弹起时 键盘弹起后
实现方式
话就不多说了 我直接贴代码了 原理就是用你点击的输入框的底部 距离顶部的位置 减去屏幕高度除以2然后设成负值再将这个值给到最外层相对定位的盒子的top属性这样就不会出现顶部导航上移的问题了具体实现如下
首先封装一个js工具包这个包其实有很多东西的但是对键盘没什么用我就去掉了是一个设备工具类没事的话可以去研究设备工具类在开发的过程中还是用处比较大的。
工具类实现 /*** 设备工具类*/
class DeviceUtil {/*** 获取当前环境 开发工具 安卓 IOS* ios: iOS微信包含 iPhone、iPad;android: Android微信;windows: Windows微信;mac: macOS微信;devtools: 微信开发者工具;*/getCurrentEnv() {var platform ;wx.getSystemInfo({success(res) {platform res.platform}})console.log(platform);return platform;}/*** 获取设备的屏幕高度*/getDeviceHeight() {var screenHeight ;wx.getSystemInfo({success: (res) {screenHeight res.windowHeight}});return screenHeight;}/*** 监听点击输入框页面弹起事件* 使用说明* 该方法对IOS上的 vant-field typetextarea / 会有显示不全的问题 不建议在textarea上使用* * param {当前页面指向} that * param {点击事件参数} e */keyboard(that, e) {// 获取屏幕高度var height this.getDeviceHeight();// 仅在手机上使用此函数if (this.getCurrentEnv() android || this.getCurrentEnv() ios) {that.setData({keyboard: 0})// 创建一个选择器查询对象const query wx.createSelectorQuery();// 选择要获取的元素query.select(# e.currentTarget.dataset.id).boundingClientRect(function (rect) {// 获取元素的位置和尺寸等信息var top (-(rect.bottom - (height / 2))) 0 ? (-(rect.bottom - (height / 2))) : 0that.setData({keyboard: top})}).exec();}}/*** 关闭键盘* param {*} that */closeKeyboard(that) {if (this.getCurrentEnv() android || this.getCurrentEnv() ios) {that.setData({keyboard: 0})}}}const deviceUtil new DeviceUtil();
export default deviceUtil;WXML中为元素添加属性
紧接着在wxml文件中需要给vant-field标签添加一些属性input标签也相同
view classform_warp styletop: {{keyboard}}px;
van-fieldidname1data-idname1bind:focusonFocusbind:bluronBluralways-embedvalue{{ value }}label用户名1placeholder请输入用户名1adjust-position{{false}}border{{ false }}//view注意 id 和data-id名称必须一致并且在当前页面唯一不然会出现问题 always-embed是因为vant在IOS上会出现一个定位后不同层的问题推荐加上adjust-position{{false}}这个属性是必须加上的他是键盘弹起时页面上移顶部栏被顶上去的罪魁祸首。 不要忘记在最外层的盒子上添加这个属性styletop: {{keyboard}}px; WXSS
.form_warp {padding: 30rpx;position: relative;
}
JS中实现
紧接着在js中使用工具包
import deviceUtil from ../../util/device-utils;
Page({/*** 页面的初始数据*/data: {// 键盘弹起上移距离keyboard: 0,},onFocus(e) {// 键盘处理deviceUtil.keyboard(this, e)},onBlur() {deviceUtil.closeKeyboard(this)},
}) 就这么简单 其实也可以直接去用键盘高度来计算这种方式其实是保证在键盘弹起的时候foucs事件的输入框会被展示在手机屏幕中间靠上的位置而一般的键盘高度不会高于手机屏幕的一半如果追求细节的话可以去改改那个计算公式就可以。
