Mini Program Component: Introduction to Chat Session Component (with code)

The content of this article is about the mini program component: the introduction of the chat session component (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Scenario

Used for online customer service chat conversations, etc.

1. Layout points

1. Triangular Arrow

Draw a 26rpx*26rpx rectangle, rotate it 45 degrees, and then hide half of it to form a right triangle on the bubble.

<!-- 画三角箭头 -->
 <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 changes the flow direction

Take the values ​​['row' | 'row-reverse'] respectively, so that the avatar of the message sent by the other party is on the left, and the avatar of the message sent by yourself is on the left On the right.

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

3. Press and hold to center the suspended layer horizontally and vertically

Option 1, js manual calculation

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;">

Option 2, pure css

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

passed In comparison, Option 2 is better than Option 1

JS circle

1. Touch event to realize sliding up to cancel voice input

Press to appear suspended. When you slide up beyond a certain distance, a cancellation prompt appears. Let go and cancel; when you slide up but not beyond a certain distance, let go and send

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. After sending the message, scroll to the end of the page

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}}">

Related recommendations:

Implementation of interaction between mini program and background (with code)

Complete code for mini program to realize automatic loading

The above is the detailed content of Mini Program Component: Introduction to Chat Session Component (with code). For more information, please follow other related articles on the PHP Chinese website!