미니 프로그램 구성 요소: 채팅 세션 구성 요소 소개(코드 포함)

이 글의 내용은 미니 프로그램 구성 요소에 대한 것입니다: 채팅 세션 구성 요소(코드 포함)에 대한 소개입니다. 필요한 친구들이 참고할 수 있기를 바랍니다. .

Scene

온라인 고객 서비스 채팅 대화 등에 사용됩니다.

#🎜🎜 #一, 레이아웃 원

1, 삼각형 화살표

26rpx*26rpx 직사각형을 그리고 45도 회전한 다음 절반을 숨겨 버블을 만듭니다. .직삼각형.

<!-- 画三角箭头 -->
 <view class="triangle" style="{{item.myself == 1 ? &#39;right: 140rpx; background: #7ECB4B&#39; : &#39;left: 140rpx;&#39;}}"></view>
 
/* 三角箭头 */
.body .triangle {
 background: white;
 width: 20rpx;
 height: 20rpx;
 margin-top: 26rpx;
 transform: rotate(45deg);
 position: absolute;
}

2. Flex-flow는 흐름 방향을 변경합니다.

​​['row' | 'row-reverse'] 값을 각각 취하여 상대방이 보낸 메시지는 왼쪽에 있고, 메시지의 아바타는 오른쪽에 있습니다.

<view class="body" style="flex-flow: {{item.myself == 0 ? &#39;row&#39; : &#39;row-reverse&#39;}}">

3 길게 누르면 정지 레이어가 수평 및 수직으로 중앙에 배치됩니다.

옵션 1, js 수동 계산

data: {
 hud_top: (wx.getSystemInfoSync().windowHeight - 150) / 2,
 hud_left: (wx.getSystemInfoSync().windowWidth - 150) / 2,
}
<view class="hud-container" wx:if="{{status != state.normal}}" style="top: {{hud_top}}px; left: {{hud_left}}px;">

옵션 2, 순수 CSS#🎜 🎜#

/*悬浮提示框*/
.hud-container {
 position: fixed;
 width: 150px;
 height: 150px;
 left: 50%;
 top: 50%;
 margin-left: -75px;
 margin-top: -75px;
}

비교해보니 계획 2가 계획 1보다 낫습니다

JS Circle Point

1. 위로 밀어 올리기 위한 터치 이벤트 음성 입력 취소

누르면 정지된 것처럼 보입니다. 일정 거리 이상 위로 밀면 취소 메시지가 나타납니다. 거리두고 보내세요

touchStart: function (e) {
 // 触摸开始
 var startY = e.touches[0].clientY;
 // 记录初始Y值
 this.setData({
 startY: startY,
 status: this.data.state.pressed
 });
 },
 touchMove: function (e) {
 // 触摸移动
 var movedY = e.touches[0].clientY;
 var distance = this.data.startY - movedY;
 // console.log(distance);
 // 距离超过50，取消发送
 this.setData({
 status: distance > 50 ? this.data.state.cancel : this.data.state.pressed
 });
 },
 touchEnd: function (e) {
 // 触摸结束
 var endY = e.changedTouches[0].clientY;
 var distance = this.data.startY - endY;
 // console.log(distance);
 // 距离超过50，取消发送
 this.setData({
 cancel: distance > 50 ? true : false,
 status: this.data.state.normal
 });
 // 不论如何，都结束录音
 this.stop();
 },

2. 메시지 보내기 완료 페이지 끝으로 스크롤

data: {
 toView: ''
}
reply: {
// ...
this.scrollToBottom()
},
scrollToBottom: function () {
 this.setData({
 toView: 'row_' + (this.data.message_list.length - 1)
 });
 },

<!--每一行消息条-->
<view class="row" wx:for="{{message_list}}" wx:key="" id="row_{{index}}">

관련 추천 :

# 🎜🎜# 미니 프로그램과 배경 간의 상호 작용 구현(코드 포함)

#🎜 🎜#미니 프로그램 자동 로딩을 위한 전체 코드

위 내용은 미니 프로그램 구성 요소: 채팅 세션 구성 요소 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!