uniapp获取键盘高度顶起底部输入框

核心代码:

     uni.onKeyboardHeightChange((res) => {console.log(res.height);//转化为rpxthis.KeyHight = res.height;});

全部代码:

<template><view class="pagesone" :class="'bg-'+themeColor.name" style="padding-top: 100rpx;"><view class="searchdemo" :style="{bottom:KeyHight?KeyHight+'px':KeyHight}" style="display: flex;flex-direction: row;"><view class="input" :class="'input-'+themeColor.name"><view class="icon"><image class="icon-child" :src="'/static/search-'+themeColor.name+'.png'" /></view><input :adjust-position="false" :always-system="true" :value="searchContent" confirm-type="search" @confirm="search" @input="onInputSearch":class="'text-'+themeColor.name" class="input-text" placeholder="输入股票名称/缩写/代码"placeholder-class="placeholder-class" :focus="true"></input><view class="icon" v-show="this.searchContent!=''" @click="clearSearch()"><image class="icon-child" :src="'/static/delete.png'" /></view></view><text :class="'text-'+themeColor.name" @click="back"style="font-size: 32rpx;margin-top: 15rpx;margin-left: 20rpx;">取消</text></view><!-- <view style="margin-top: 30rpx; display: flex;flex-direction: row;justify-content: center;"><text :class="'text-'+themeColor.name" style="font-size: 28rpx;" v-show="tab == 1"@click="ChangeTab(1)">股票</text><text style="font-size: 28rpx;color: #6F6F6F;" v-show="tab != 1" @click="ChangeTab(1)">股票</text><text :class="'text-'+themeColor.name" style="font-size: 28rpx;margin-left: 130rpx;margin-right: 130rpx;"v-show="tab == 2" @click="ChangeTab(2)">概念</text><text style="font-size: 28rpx;color: #6F6F6F;margin-left: 130rpx;margin-right: 130rpx;" v-show="tab != 2"@click="ChangeTab(2)">概念</text><text :class="'text-'+themeColor.name" style="font-size: 28rpx;" v-show="tab == 3"@click="ChangeTab(3)">资讯</text><text style="font-size: 28rpx;color: #6F6F6F;" v-show="tab != 3" @click="ChangeTab(3)">资讯</text></view> --><view class="blist" :style="{bottom:KeyHight?KeyHight+40+'px':'80rpx'}" style="padding-top: 30rpx;" v-show="tab == 1"><block v-for="(item, index) in gpList.slice().reverse()" :key="index"><u-GPList :item="item"></u-GPList></block></view><view :class="'bg-'+themeColor.name" style='position: fixed;width:100%;height: 100%;z-index: 0;'></view></view></template><script>import uGPList from './search-main-gupiao-list.vue';export default {components: {uGPList,},data() {return {tab: 1,searchContent: "",gpList: [],KeyHight: 0,}},onLoad(option) {this.$statusColor.modification();uni.onKeyboardHeightChange((res) => {console.log(res.height);//转化为rpxthis.KeyHight = res.height;});},methods: {back() {uni.navigateBack({});},clearSearch() {this.searchContent = "";},ChangeTab(tab) {this.tab = tab;},/* 键盘上完成(回车)的事件 */search() {if (this.isBlank(this.searchContent)) {this.$toast("输入股票代码/首字母");return;}if (this.tab == 1) {this.search_index(this.searchContent);} else if (this.tab == 2) {} else if (this.tab == 3) {}},onInputSearch: function(e) {if (this.tab == 1) {this.searchContent = e.detail.value;if (this.searchContent != "") {this.search_index(this.searchContent);}} else if (this.tab == 2) {} else if (this.tab == 3) {}},search_index(word) {var _this = this;this.request({urlInfo: this.$REQUEST.SEARCH_INDEX,body: {word: word,showtype: 'app',},success(res) {console.log("search_index==", res)},fail: (res) => {console.log("search_index==", res)var newList = [];res.data.data.filter((item, i) => {var obj = {};var sList = item.split(" ")obj.code = sList[0];obj.name = sList[1];obj.sx = sList[2];obj.foxxcode = sList[3];newList[i] = obj;return item >= res.data.data.length})_this.gpList = newList;}})},},}
</script><style lang="scss">
.pagesone{width: 100%;height: 100%;
}
.searchdemo{//触底width: 100vw;position: absolute;bottom: 0;z-index: 99;//被键盘顶起
}
.blist{width: 100vw;position: absolute;bottom: 80rpx;z-index: 99;
}.icon {.icon-child {width: 40rpx;height: 40rpx;margin-top: 10rpx;}}.input {margin-left: 30rpx;width: 75%;height: 76rpx;display: flex;flex-direction: row;align-items: center;border-radius: 10rpx;padding-left: 20rpx;padding-right: 20rpx;}.input-text {margin-left: 20rpx;margin-right: 20rpx;width: 100%;font-size: 32rpx;}.placeholder-class {color: #6F6F6F;font-size: 32rpx;}
</style>

此方法适配ios和安卓

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/232040.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Windows系统C盘爆红】之扩展C盘大小详细步骤

扩展C盘大小详细步骤 一、C盘爆红怎么办二、为什么C盘容易爆满三、c盘扩容 建议&#xff1a;文中的两处链接&#xff0c;可以参考进行c盘操作&#xff01; 一、C盘爆红怎么办 我们好多人在使用一段时间电脑后&#xff0c;发现C盘大小会急剧减少&#xff0c;开始小蓝条快占满&…

【Go】基于GoFiber从零开始搭建一个GoWeb后台管理系统(五)角色管理、菜单管理模块

窝来辣&#x1f601; 下面是前几篇的内容&#xff1a; 第一篇&#xff1a;【Go】基于GoFiber从零开始搭建一个GoWeb后台管理系统&#xff08;一&#xff09;搭建项目 第二篇&#xff1a;【Go】基于GoFiber从零开始搭建一个GoWeb后台管理系统&#xff08;二&#xff09;日志…

挑战52天学小猪佩奇笔记--day26

52天学完小猪佩奇--day26 ​【本文说明】 本文内容来源于对B站UP 脑洞部长 的系列视频 挑战52天背完小猪佩奇----day26 的视频内容总结&#xff0c;方便复习。强烈建议大家去关注一波UP&#xff0c;配合UP视频学习。 day26的主题&#xff1a;堆雪人 猜台词&#xff1a; 旁白&am…

卷积神经网络的学习与实现

基于matlab的卷积神经网络(CNN)讲解及代码_matlab中如何查看cnn损失函数-CSDN博客 可以看到与BP神经网络相比&#xff0c;卷积神经网络更加的复杂&#xff0c;这里将会以cnn作为学习案例。 1.经典反向传播算法公式详细推导 这里引用经典反向传播算法公式详细推导_反向目标公…

docker jar包打成镜像并推送到仓库

shell脚本 #!/bin/bash image_name$1 version$2 echo ${version}echo build...... docker build -t ${image_name}:${version} . echo build doing..... sleep 10 image_idsudo docker images | grep ${image_name} | awk -F" " {print $3} | head -n 1 echo ${imag…

敏捷开发项目管理流程及scrum工具

项目启动&#xff1a; 团队明确项目愿景、目标和范围&#xff0c;确定项目范围和优先级&#xff0c;并建立团队以及开展初步计划。 制定产品待办事项清单&#xff08;Product Backlog&#xff09;&#xff1a; 定义项目所需功能、任务和需求列表&#xff0c;并按优先级排序。 …

使用libaom处理av1编码教程

使用libaom处理av1编码教程 文章目录 使用libaom处理av1编码教程一. av1 是什么二. av1 用处三. libaom 是什么四. libaom 安装五. libaom 安装完成六. 解码av1 一. av1 是什么 AV1&#xff08;AOMedia Video 1&#xff09;是一种 开源视频编码格式 。它由开放媒体联盟 (AOM) …

N6705B 直流电源分析仪,模块化,600 W,4 个插槽,是德科技 低功耗测试专家

N6705B 直流电源分析仪 简述&#xff1a; N6705B 直流电源分析仪将多达 4 个先进电源与数字万用表、示波器、任意波形发生器和 Data logger 特性融为一体&#xff0c;可以显著提高向被测件提供直流电压和电流以及进行测量的效率。N6705B 可独立测量被测件的电流&#xff0c;无…

【重点】【前缀树|字典树】208.实现Trie(前缀树)

题目 前缀树介绍&#xff1a;https://blog.csdn.net/DeveloperFire/article/details/128861092 什么是前缀树 在计算机科学中&#xff0c;trie&#xff0c;又称前缀树或字典树&#xff0c;是一种有序树&#xff0c;用于保存关联数组&#xff0c;其中的键通常是字符串。与二叉查…

手写RTOS准备

1. 确定RTOS基本功能 首先&#xff0c;你需要定义你的RTOS应该具备的基本功能。对于一个简单的RTOS&#xff0c;你可能需要包括以下功能&#xff1a; 任务调度&#xff1a;&#xff08;Task Scheduling&#xff09;&#xff1a;这是RTOS最核心的功能之一。它允许系统支持多个任…

【Apache-StreamPark】Flink 开发利器 StreamPark 的介绍、安装、使用

【Apache-StreamPark】Flink 开发利器 StreamPark 的介绍、安装、使用 1&#xff09;框架介绍与引入1.1.&#x1f680; 什么是 StreamPark1.2.&#x1f389; Features1.3.&#x1f3f3;‍&#x1f308; 组成部分1.4.引入 StreamPark 2&#xff09;安装部署2.1.环境要求2.2.Hado…

【缓存】一、Redis的基本使用与Redisson分布式锁

缓存 缓存技术是一种可以大幅度提高系统性能的技术&#xff0c;我们可以在某些适用的场景下使用缓存来大幅度的提高系统性能 读缓存的基本流程&#xff1a; 请求向缓存中查数据 if (命中) {返回缓存中的数据 } else {从数据库中取出数据将该数据在缓存中再存储一份返回缓存中…

重温经典struts1之八种页面跳转或请求转发的方式

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 前言 今天来学习下&#xff0c;struts1框架中实现页面跳转或请求转发的八种方式。 页面跳转方式 request的Dispatcher方法 这种方式在学习servlet编程中&#xff0c;我们学…

ACM32如何保护算法、协议不被破解或者修改

ACM32具有以下几种功能&#xff0c;可以保护算法、协议不被破解或者修改。 1.存储保护  RDP读保护  WRP写保护  PCROP 专有代码读保护  MPU存储区域权限控制  Secure User Memory存储区域加密 2.密码学算法引擎  AES  HASH  随机数生成  …

Electron中Tray的setContextMenu导致窗口无法聚焦

在使用 Electron 开发应用时&#xff0c;经常会遇到使用 Tray&#xff08;托盘&#xff09;和设置上下文菜单&#xff08;ContextMenu&#xff09;导致窗口无法正常聚焦的问题。这会导致用户无法在带有输入框的窗口中进行输入&#xff0c;影响应用的用户体验。 tray.setContex…

Vue3-22-组件-插槽的使用详解

插槽是干啥的 插槽 就是 组件中的一个 占位符&#xff0c; 这个占位符 可以接收 父组件 传递过来的 html 的模板值&#xff0c;然后进行填充渲染。 就这么简单&#xff0c;插槽就是干这个的。要说它的优点吧&#xff0c;基本上就是可以使子组件的内容可以被父组件控制&#xf…

亚信科技AntDB数据库——深入了解AntDB-M元数据锁的实现(一)

锁的获取 5.1 锁的强弱 当线程已经持有的锁比新申请的锁更强时&#xff0c;认为已经持有了锁&#xff0c;无需再对申请锁类型加锁。锁的强弱指持有的锁与其他锁的不兼容集合大小&#xff0c;集合相同锁相同&#xff0c;集合更大锁更强&#xff0c;否则无强弱关系。通过锁的兼…

【Linux】基于框架编写驱动代码、驱动代码编译和测试

基于框架编写驱动代码 驱动代码编译和测试 ARM架构上进行Linux内核模块的交叉编译 总结 内核驱动框架基本驱动测试步骤 基于框架编写驱动代码 编写一个Linux设备驱动框架需要一些基本的步骤&#xff0c;以及一些特定于硬件的信息。由于你提到基于PIN4&#xff0c;我将提供…

JavaScript基础篇

目录 1.初始JavaScript 2.Js数据类型 2.1强制转换类型 1.转换为String类型 2.转换为Number类型 3.转换为 Boolean 4.转义符 2.2运算符 2.3分支结构 1.初始JavaScript <!-- 1. 文件引入 --> <!--<script src"./js/index.js"></script>-…

JVM-7-经典垃圾收集器

Serial收集器 这个收集器是一个单线程工作的收集器&#xff0c;但它的“单线程”的意义并不仅仅是说明它只会使用一个处理器或一条收集线程去完成垃圾收集工作&#xff0c;更重要的是强调在它进行垃圾收集时&#xff0c;必须暂停其他所有工作线程&#xff0c;直到它收集结束。…