小程序
小游戏
企业微信
微信支付
扫描小程序码分享
一行文字和多行文字高度不同，气泡总是对应不上头像，请问怎么处理这样的问题呢？
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
应该是你的样式有问题，提交一个代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
参考第三方组件库 colorUI 里面的聊天界面样式。
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
一行文字和多行文字高度不同，气泡总是对应不上头像，请问怎么处理这样的问题呢？
应该是你的样式有问题，提交一个代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
参考第三方组件库 colorUI 里面的聊天界面样式。
<scroll-view id='page' scroll-into-view="{{toView}}" upper-threshold="100" scroll-y="true" enable-back-to-top="true" class="message-list">
<!-- 每一条消息 -->
<view class="cu-chat" wx:for="{{chats}}" wx:key="index" id="row_{{index}}">
<!-- 自己发出的消息 -->
<block wx:if="{{item.openid == openid}}">
<block wx:if="{{item.showTime}}">
<view class="datetime" style="width:100%">{{item.sendTime}}</view>
</block>
<view class="cu-item self" style="width : 750rpx ; height : {{chats[index].textHeight}}rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">
<view class="main">
<view id = "textID_{{index}}" class="content bg-green shadow" style=" box-sizing: border-box; z-index:0; border-radius: 10rpx">
<text style=" font-size:33rpx">{{item.textContent}}</text>
</view>
</view>
<view class="cu-avatar radius center" style="background-image: url({{useravatar}}); width: 71rpx; height: 71rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx" bindtap="go_myinfo"></view>
</view>
</block>
<!-- 对方发出的消息 -->
<block wx:else>
<block wx:if="{{item.match_openid == match_openid}}">
<view class="datetime" style="width:100%">{{item.sendTime}}</view>
</block>
<view class="cu-item" style="width: 750rpx; height: 120rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">
<view class="cu-avatar radius center" style="background-image: url({{match_avatar}}); width: 71rpx; height: 71rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">
</view>
<view class="main">
<view class="content bg-white shadow" style="position: relative; left: 0rpx; top: 22rpx;border-radius: 10rpx">
<text style="font-size:33rpx">{{item.textContent}}</text>
</view>
</view>
</view>
</block>
</view>
<view id = 'placeholderID' class='placeholder-view'></view>
</scroll-view>
<!-- 回复框 -->
<view class="reply cu-bar">
<!-- 输入框 -->
<view class="opration-area">
<input type="text" bindinput="getContent" value="{{textInputValue}}" maxlength="300" cursor-spacing="10" style="width: 544rpx; height: 64rpx; display: block; box-sizing: border-box;"></input>
</view>
<!-- 发送按钮 -->
<button class="cu-btn bg-green shadow" bindtap='sendMsg' style="width: 150rpx; height: 64rpx; display: flex; box-sizing: border-box; left: -22rpx; top: 0rpx; position: relative">发送</button>
</view>