Mini-Programmkomponente: Einführung in die Chat-Sitzungskomponente (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Mini-Programmkomponente: Eine Einführung in die Chat-Sitzungskomponente (mit Code). Ich hoffe, dass sie für Sie hilfreich ist.

Szenario

Wird für Online-Kundendienst-Chat-Gespräche usw. verwendet.

1. Layoutpunkte

1. Dreieckiger Pfeil

Zeichnen Sie ein 26rpx*26rpx großes Rechteck, drehen Sie es um 45 Grad und verstecken Sie dann die Hälfte davon, um ein rechtwinkliges Dreieck auf der Blase zu bilden.

<!-- 画三角箭头 -->
 <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 ändert die Flussrichtung

nimmt den Wert ['row' | 'row-reverse'] an, sodass der Avatar der von der anderen Partei gesendeten Nachricht angezeigt wird ist auf der linken Seite und der Avatar der von Ihnen gesendeten Nachricht ist auf der linken Seite.

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

3. Halten Sie gedrückt, um die schwebende Ebene horizontal und vertikal zu sprechen und zu zentrieren

Option 1, manuelle js-Berechnung

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, reines CSS

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

bestanden Im Vergleich ist Option 2 besser als Option 1

JS-Kreis

1. Berühren Sie das Ereignis, um zu erkennen, dass Sie nach oben schieben, um die Spracheingabe abzubrechen

Drücken Sie, um eine bestimmte Distanz nach oben zu verschieben. Lassen Sie los und brechen Sie ab, wenn Sie eine bestimmte Distanz nach oben verschieben. Lassen Sie los und senden Sie

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. Danach Senden Sie die Nachricht und scrollen Sie zum Ende der Seite

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

rrree Verwandte Empfehlungen:

Implementierung der Interaktion zwischen Miniprogramm und Hintergrund (mit Code)

Vollständiger Code zum automatischen Laden des Miniprogramms

Das obige ist der detaillierte Inhalt vonMini-Programmkomponente: Einführung in die Chat-Sitzungskomponente (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!