uniapp 聊天输入框会带动聊天内容区域滚动

1.在做uniapp聊天时候会出现,聊天输入框内容过长时候滚动输入框内容,会带动底部消息区域也会滚动,导致用户体验不好
最终将以下代码加入到你的输入框最外层即可达到我们想要的结果 ==》 @touchmove.stop.prevent="()=>{}"阻止滑动穿透 ,即可达到我们想要的效果。
<!-- 菜单栏  -->
	<view class="submit" :style="{'bottom': keyboardHeight + 'px'}" @touchmove.stop.prevent="()=>{}">
		<view class="submit_chat">
			<textarea class="chat_send">
			</textarea>
			<image class="more" src="../../static/message/emoji.png" @touchend.prevent="Function_Emoji"></image>
			<image class="more" src="../../static/message/more.png" v-if="!isSendButton" @click="Function_Menu"></image>
			<view class="sendMessage" @touchend.prevent="sendMessage()" v-if="isSendButton">发送</view>
		</view>
	</view>

Alt
这样就基本大功告成了,快去试试体验体验吧,哈哈哈哈哈哈哈哈哈。

uniapp中,可以使用块状输入框来实现更多样式的验证码、密码设置等功能。可以通过自定义样式和注意事项来实现这一功能。可以通过设置不同的样式类来实现标题、内容输入框等的布局和样式设置。可以使用类似card插件来实现分为三块的块状条形内容,通过调整内外边距和使用colorui比例布局来平均分配三个小内容区域的布局。在uniapp中引入ColorUI可以通过复制colorui文件到项目中,并在App.vue中编写全局的适配变量和引入colorui全局样式。还可以在main.js中引入并注册顶部导航栏组件custom,并在pages.json中将全局导航栏的样式定义为custom。在页面中使用custom组件来实现相应的布局和样式。而在开发页面时,可以在插件市场引入需要的插件,比如tab切换组件等,然后根据需要进行开发。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [验证码/密码输入框(矩形方块样式)写法设置](https://blog.csdn.net/qq_45659769/article/details/118720613)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [uniapp开发微信小程序教程(二)实现一个页面](https://blog.csdn.net/weixin_43585799/article/details/122093178)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值