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,一经查实,立即删除!

相关文章

【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.经典反向传播算法公式详细推导 这里引用经典反向传播算法公式详细推导_反向目标公…

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;其中的键通常是字符串。与二叉查…

【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…

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

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

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

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

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

锁的获取 5.1 锁的强弱 当线程已经持有的锁比新申请的锁更强时&#xff0c;认为已经持有了锁&#xff0c;无需再对申请锁类型加锁。锁的强弱指持有的锁与其他锁的不兼容集合大小&#xff0c;集合相同锁相同&#xff0c;集合更大锁更强&#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;直到它收集结束。…

sql服务无法启动 请键入net helpmsg 3534

然后 如果是管理员权限打开命令行输入操作的话 先清空 MySQL 下的 data 文件夹&#xff0c;然后确保系统环境变量中已经配置了 mysql 的 bin 目录到Path中&#xff0c;然后执行 sc delete mysql 得到 [SC] DeleteService 成功 后&#xff08;也可能不会有返回信息&#xff…

Oracle 中ROW_NUMBER() OVER()函数用法详解

select * from ( select t.data maxdata, datatime,s.xlmc,ROW_NUMBER() OVER (PARTITION BY s.xlmc ORDER BY datatime) AS rn from HISTORY_FH_ONEDAY t, CURRENT_FH_XL s where t.code s.code ) c where c.rn1

VSCode 常用的快捷键和技巧系列(2)

一、如何让VSCode工程树显示图标 第一步&#xff1a;安装 快捷键 CtrlP &#xff0c;输入 ext install vscode-icons &#xff0c;然后点击安装插件 第二步&#xff1a;配置 安装成功后&#xff0c;点击Reload重新加载。 然后配置&#xff0c;当前图标使用VsCode-Icons Go…

喜报|亚数荣获“2023物联网场景应用品牌企业”奖项

12月5日至6日&#xff0c;以“物联中国 数智雄安”为主题的“千企雄安行&#xff1a;2023物联网产业品牌大会”在雄安新区举办。 大会由雄安新区管理委员会、中关村发展集团股份有限公司、物联中国团体组织联席会主办&#xff0c;雄安新区投资促进服务中心、北京物联网智能技术…

【LeetCode刷题】-- 229.多数元素II

229.多数元素II 方法&#xff1a;使用哈希表 class Solution {public List<Integer> majorityElement(int[] nums) {HashMap<Integer,Integer> map new HashMap<>();for(int i 0;i< nums.length;i){map.put(nums[i],map.getOrDefault(nums[i],0) 1);}…

【K8S基础】-k8s的核心概念pod

一、Pod 是什么 1.1 Pod 的定义和概念 在Kubernetes中&#xff0c;Pod是创建或部署的最小/最简单的基本单位。一个Pod代表着集群上正在运行的一个进程&#xff0c;它封装了一个或多个应用容器&#xff0c;并且提供了一些共享资源&#xff0c;如网络和存储&#xff0c;每个Pod…

c语言:判断闰年|练习题

一、题目 输入一个年份&#xff0c;判断该年份是否闰年 二、解题思路 闰年的判断方法 【】普通闰年&#xff1a; 公历年份是4的倍数&#xff0c;且不是100的倍数 【】世纪闰年&#xff1a; 公历年份是整百数的年份&#xff0c;需是400的倍数 三、代码图片【带注释】 四、源代码…

数组去重及去除指定值,每一个对象添加属性值

1、数组去重ES6写法 Set() // 数组去重 let arr [1,2,4,6,3,2,6,7,7,2,9,0,1,5] arr [...new Set(arr)] console.log(arr); 2、数组去除指定值 filter() // 数组去除指定值 let arr [1,2,4,6,3,2,6,7,7,2,9,0,1,5] const num 7 arr arr.filter(item>item!num) cons…

详解YOLOv5网络结构/数据集获取/环境搭建/训练/推理/验证/导出/部署

一、本文介绍 本文给大家带来的教程是利用YOLOv5训练自己的数据集&#xff0c;以及有关YOLOv5的网络结构讲解/数据集获取/环境搭建/训练/推理/验证/导出/部署相关的教程&#xff0c;同时通过示例的方式让大家来了解具体的操作流程&#xff0c;过程中还分享给大家一些好用的资源…