首页 > 编程语言 >关于小程序聊天框开发遇到的问题

关于小程序聊天框开发遇到的问题

时间:2023-09-13 12:24:36浏览次数:30  
标签:获取 遇到 高度 程序 height 输入框 聊天 scroll view

1.当输入框聚焦时,聊天框页面往上进行平移,导致页面难看

解决:设置输入框input的这个属性为false

2.设置上面为false时,定位在下面的输入框不进行上移

解决:动态设置定位top值,设置获取焦点和失去焦点的方法

//定位的样式

:style="{'bottom':inputHeight+'px'}"

//输入框的事件

@focus="focus" @blur="blur"

//定义方法

//聚焦
focus(e) {
     let height = e.detail.height
      this.inputHeight = height
},

//失焦
blur() {
       this.inputHeight = 0
}

 

 

3.发出的消息自动滚动到最下面 

首先在scroll-view设置:scroll-top="scrollTop"

内部结构为

<scroll-view class="scroll" >
        <view id="scroll-view-content"></view>
</scroll-view>

scrollToBottom() {
				this.$nextTick(() => {
					// 获取内部容器的高度
					uni.createSelectorQuery().in(this).select('#scroll-view-content').boundingClientRect((res) => {
						//获取scroll-view的高度
						uni.createSelectorQuery().in(this).select('.scroll').boundingClientRect((ress) => {
							this.scrollTop = res.height - ress.height
						}).exec()
					}).exec()
				})
			},

4.键盘弹起时scroll-view高度不变,导致滚动不到最下面

解决:动态设置scroll-view的高度,根据获取焦点失去焦点,使用容器的高度减去键盘的高度,在获取焦点的时候能获取到键盘的高度

标签:获取,遇到,高度,程序,height,输入框,聊天,scroll,view
From: https://www.cnblogs.com/wcq520/p/17699224.html

相关文章

  • 通过这些API,开发者可以在自己的应用程序中嵌入电商功能,为用户提供便捷的购物体验
    在当今的数字化时代,电子商务已经成为人们日常生活的重要组成部分。随着电子商务的飞速发展,许多电商平台都提供了API(应用程序接口)来允许开发者调用特定的功能,如商品查询、购物车管理、订单处理以及支付等。通过这些API,开发者可以在自己的应用程序中嵌入电商功能,为用户提供便捷的购物......
  • 融云聊天室再放大招,服务更完整、集成更便捷
    聊天室是直播、语聊房等社交泛娱乐产品的必备组件,它以“公屏”形态面向用户。 关注【融云全球互联网通信云】了解更多作为一个用户关系临时、消息内容短小重复的公共聊天频道,聊天室承担观众与主播互动的任务。因此,承接海量用户的并发能力是聊天室产品的第一要义,此外,融云还率先推出......
  • OpenHarmony:全流程讲解如何编写GPIO平台驱动以及应用程序
    1、案例简介该程序是基于OpenHarmony标准系统编写的基础外设类:GPIO驱动。目前已在凌蒙派-RK3568开发板跑通。详细资料请参考官网:https://gitee.com/Lockzhiner-Electronics/lockzhiner-rk3568-openharmony/tree/master/samples/b03_platform_device_gpio详细资料请参考OpenHarmo......
  • 基于微信小程序的学生活动管理系统
    由于APP软件在开发以及运营上面所需成本较高,而用户手机需要安装各种APP软件,因此占用用户过多的手机存储空间,导致用户手机运行缓慢,体验度比较差,进而导致用户会卸载非必要的APP,倒逼管理者必须改变运营策略。随着微信小程序的出现,解决了用户非独立APP不可访问内容的痛点,所以很多APP软......
  • 基于微信小程序的医院挂号系统设计与实现+ssm
    随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了医院挂号系统小程序的开发全过程。通过分析医院挂号信息管理的不足,创建了一个计算机管理医院挂号信息的方案。文章介绍了医院挂号系统小程序的系统分析部分,包括可行性分析等,系统设计部......
  • 基于微信小程序的房屋租赁管理系统
    随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了基于微信小程序的房屋租赁管理系统的开发全过程。通过分析基于微信小程序的房屋租赁管理系统管理的不足,创建了一个计算机管理基于微信小程序的房屋租赁管理系统的方案。文章介绍了基于......
  • 基于微信小程序的公交信息在线查询系统
    随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了微信小程序公交信息在线查询系统的开发全过程。通过分析微信小程序公交信息在线查询系统信息管理的不足,创建了一个计算机管理微信小程序公交信息在线查询系统信息的方案。文章介绍了微......
  • 基于微信小程序的外卖点餐的设计与实现
    随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了微信小程序外卖点餐的设计与实现的开发全过程。通过分析微信小程序外卖点餐的设计与实现管理的不足,创建了一个计算机管理微信小程序外卖点餐的设计与实现的方案。文章介绍了微信小程序......
  • 基于微信小程序的社区互助养老
    随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了微信小程序社区互助养老的开发全过程。通过分析微信小程序社区互助养老管理的不足,创建了一个计算机管理微信小程序社区互助养老的方案。文章介绍了微信小程序社区互助养老的系统分析部......
  • 遇到错误:ESLint:TypeError:this.libOptions.parse is not a function
    遇到错误:ESLint:TypeError:this.libOptions.parseisnotafunction打开vue文件之后遇到如下错误:ESLint:TypeError:this.libOptions.parseisnotafunction该问题是由ESLint8.23中引入的更改引起的解决方法:将ESLint降级到8.22.x或更早版本npminstalleslint@8......