【uniapp】关于小程序输入框聚焦、失焦(输入法占位)的问题

聊天小程序,界面带有输入框,当输入框中聚焦后,底部自动谈起输入法。此时输入框也要随之出现在输入法上方。默认情况下,输入框此时会被输入法覆盖掉。

以下是亲自实践,解决这个问题的方法:

一、小程序大概布局

<template><view style="height: 100%; display: flex; flex-direction: column;"><!-- 自定义导航栏 --><head-nav :navRedirectPage="navRedirectPage"></head-nav><!-- 小程序界面内容 --><view class="container" :style="containerStyle"><!-- 聊天界面内容 --><scroll-view ref='list' :scroll-top="scrollTop" class="chat-container" :scroll-y="true"></scroll-view><!-- 底部输入框 --><view class="bottom-bar"  :style="bottom_autosize_style"><view class="input-view"><uv-textarea selectable="true" :cursor-spacing="20" v-model="inputText" :inputBorder="false" customStyle="overflow: scroll;max-height: 75px;border-width: 0px !important;background-color: #F7F7FC;margin-left: 12px;padding: 7px;":adjust-position="false" :show-confirm-bar='false' @blur="inputBindBlur" :maxlength="500" autoHeight placeholder="请输入内容" @focus="inputBindFocus"></uv-textarea>					<button class="send-button" @click="sendMessage":disabled="!inputText.trim().length>0 || sendDisabled"><image class="send-message" src="/static/v2/aichat/fasong.png" /></button></view></view></view></view>
</template>

css样式表:

  • 默认样式为:
	// 聊天窗口.chat-container {flex-grow: 1; // 窗口大小为可变overflow-y: auto;}// 底部输入框.bottom-bar {position: relative;display: flex;align-items: center;padding: 6px 13px 6px 13px;  // 主要是padding-bottom变化}
  • 当焦点在输入框内时,需要调整内容:
// 聚焦方法
inputBindFocus(e){console.log('e.detail.height:', e.detail.height)if (e.detail.height) {this.bottom_autosize_style = "padding-bottom:" +  (e.detail.height + 6ssss) + "px;"if (!this.showScrollToBottom) {this.scrollToBottom();}}
},
// 失焦方法
inputBindBlur(){// this.containerStyle = ' height:' + this.containerHeight + 'px;';this.bottom_autosize_style = ""if (!this.showScrollToBottom) {this.scrollToBottom();}
}

请注意 bottom_autosize_style 这个变量的变化,即可实现。

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

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

相关文章

HTTPS 之fiddler抓包--jmeter请求

一、浅谈HTTPS 我们都知道HTTP并非是安全传输&#xff0c;在HTTPS基础上使用SSL协议进行加密构成的HTTPS协议是相对安全的。目前越来越多的企业选择使用HTTPS协议与用户进行通信&#xff0c;如百度、谷歌等。HTTPS在传输数据之前需要客户端&#xff08;浏览器&#xff09;与服…

ASP.NET Core 中的两种 Web API

ASP.NET Core 有两种创建 RESTful Web API 的方式&#xff1a; 基于 Controller&#xff0c;使用完整的基于ControllerBase的基类定义接口endpoints。基于 Minimal APIs&#xff0c;使用Lambda表达式定义接口 endpoints。 基于 Controller 的 Web API 可以使用构造函数注入&a…

2023-09-04力扣每日一题

链接&#xff1a; 449. 序列化和反序列化二叉搜索树 题意&#xff1a; 把一个二叉搜索树变成字符串&#xff0c;还要能变回来 解&#xff1a; 和剑指 Offer 37. 序列化二叉树差不多&#xff0c;那个是二叉树的序列化/反序列化-Hard 直接CV了&#xff0c;懒: ( 如果是二叉…

在 Spring 4.3.9下升级 Velocity 1.7.x to Velocity 2.0.x 出现的问题

1: Spring 的 spring-context-support 报错 java.lang.NoClassDefFoundError: org/apache/velocity/runtime/log/CommonsLogLogChute 等待 Spring 升级支持 Velocity 2.0.x 或自己改 Spring 的源码 velocity整个初始化日志过程&#xff1a; new RuntimeInstance()&#xff0c…

Codeforces Round 895 (Div. 3) C. Non-coprime Split

找到数字 x x x的因子 k k k&#xff0c;构造出 k , x − k k,x-k k,x−k即可。 因为 x C 1 ∗ k x C_1 * k xC1​∗k , x − k ( C 1 − 1 ) ∗ k x - k (C_1 - 1) * k x−k(C1​−1)∗k&#xff0c;保证其最小公因数不为 1 1 1如果没有因子&#xff0c;即这个数字是质数&…

【SpringMVC】RESTful风格CRUD实现

目录 一、REST简介 1.1 什么是REST? 1.2 REST风格的优点 1.3 请求方式 二、构建项目 ⭐思路分析 2.1 环境准备 2.1.1 导入相关pom依赖 2.1.2 jdbc.properties&#xff1a;配置文件 2.1.3 配置代码生成器 generatorConfig.xml 2.1.4 spring与mybatis整合的配置文件 s…

三门问题讨论

三门问题讨论 三门问题第一种第二种 三门问题 三门问题&#xff08;Monty Hall problem&#xff09;亦称为蒙提霍尔问题、蒙特霍问题或蒙提霍尔悖论&#xff0c;大致出自美国的电视游戏节目Let’s Make a Deal。问题名字来自该节目的主持人蒙提霍尔&#xff08;Monty Hall&…

LeetCode(力扣)46. 全排列Python

LeetCode46. 全排列 题目链接代码 题目链接 https://leetcode.cn/problems/permutations/ 代码 class Solution:def backtracking(self, nums, result, path, used):if len(path) len(nums):result.append(path[:])for i in range(len(nums)):if used[i]:continuepath.app…

云数据库知识学习——云数据库产品、云数据库系统架构

一、云数据库产品 1.1、云数据库厂商概述 云数据库供应商主要分为三类。 ① 传统的数据库厂商&#xff0c;如 Teradata、Oracle、IBM DB2 和 Microsoft SQL Server 等。 ② 涉足数据库市场的云供应商&#xff0c;如 Amazon、Google、Yahoo!、阿里、百度、腾讯…

Milvus Cloud扩展变更:为向量数据库注入前沿增强功能

在向量数据库的不断变化中,Milvus Cloud已成为一个改变游戏规则的先锋,革新了我们存储、搜索和分析复杂向量数据的方式。通过最新版本的Milvus Cloud2.3.0,引入了一系列重要的增强和修改,为更强大、更高效的向量数据库解决方案铺平了道路。在本文中,我们将深入探讨Milvus …

基因融合与癌症研究gene fusions in cancer

基因融合与癌症研究简历史(截止到2015年) Major discoveries from research on gene fusions and cancer 主要肿瘤亚型涉及的基因融合数量 Number of gene fusions involved in major neoplasia subtypes 恶性疾病中基因融合相关FDA批准药物 FDA-approved drugs targeting…

OpenVINO2023+Win 11配置

&#x1f482; 个人主页:风间琉璃&#x1f91f; 版权: 本文由【风间琉璃】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 目录 前言 一、Anaconda 二、OpenVINO 三、PyCharm 前言 OpenVINO™是英特尔…

【数据结构】 七大排序详解(贰)——冒泡排序、快速排序、归并排序

文章目录 ⚽冒泡排序⚾算法步骤&#x1f3a8;算法优化&#x1f94e;代码实现&#xff1a;&#x1f3c0;冒泡排序的特性总结 &#x1f9ed;快速排序⚽算法思路&#x1f4cc;思路一&#xff08;Hoare版&#xff09;&#x1f4cc;思路二&#xff08;挖坑法&#xff09;&#x1f4c…

私有云系统生态选型与架构整合实战

文章目录 私有云系统生态选型与架构整合实战简介私有云系统选型OpenStackVMware vSphereOpenNebulaEucalyptus 私有云架构整合实战OpenStack架构整合实战VMware vSphere架构整合实战OpenNebula架构整合实战Eucalyptus架构整合实战 私有云系统的安全性问题身份认证和访问控制 私…

2023数模A题——定日镜场的优化问题

A题——定日镜场的优化问题 思路&#xff1a;该题主要考察的几何知识和天文学知识&#xff0c;需要不同角度下的镜面和遮挡情况。 资料获取 问题1&#xff1a; 若将吸收塔建于该圆形定日镜场中心&#xff0c;定日镜尺寸均为 6 m6 m&#xff0c;安装高度均为 4 m&#xff0c;且…

波奇学C++:多态

组合和继承 继承是白箱复用(whiter-box-reuse),获得继承类的内部细节 组合是黑盒测试(black-box-reuse),无法得走类的内部实现 class C {// }; //组合 class E { private:C _cc; }; is-a 关系用继承&#xff0c;人-学生&#xff1b;has-a 关系用组合 车-轮胎。 多态&#…

04-MySQL02

1、什么是索引下推&#xff1f; 索引下推&#xff08;index condition pushdown &#xff09;简称ICP&#xff0c;在Mysql5.6的版本上推出&#xff0c;用于优化查询。 需求: 查询users表中 "名字第一个字是张&#xff0c;年龄为10岁的所有记录"。 SELECT * FROM u…

【AWS】实操-保护 Amazon S3 VPC 终端节点通信

文章目录 实验概览目标实验环境任务 1&#xff1a;探索并启动实验环境任务 1.1&#xff1a;探索 Amazon VPC 资源任务 1.2&#xff1a;探索 Amazon EC2 资源任务 1.3&#xff1a;创建 Amazon VPC 终端节点任务 1.4&#xff1a;连接私有 EC2 实例任务 1.5&#xff1a;探索 Amazo…

【最新!七麦下载量analysis参数】逆向分析与Python实现加密算法

文章目录 1. 写在前面2. 请求分析3. 加密分析4. 算法实现 1. 写在前面 之前出过一个关于榜单analysis的分析&#xff0c;有兴趣的可以查看这篇文章&#xff1a;七麦榜单analysis加密分析 最近运营团队那边有同事找到我们&#xff0c;说工作中偶尔需要统计分析一下某APP在一些主…

帆软报表执行sql报SQL command not properly ended

如果你在执行预览SQL时报如下图的错误&#xff1a; 你需要检查一下几点&#xff1a; 1.是否在SQL在有逗号忘记加了 2.是否有括号少了 3.是否在SQL的最后有分号存在&#xff0c;如果有需要去掉&#xff0c;这点是比较坑的&#xff0c;因为SQL最后加分号在oracle数据库中是能够…