Mini composant de programme : introduction au composant de session de chat (avec code)

Le contenu de cet article concerne le composant mini-programme : une introduction au composant de session de chat (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Scénario

Utilisé pour les conversations de chat du service client en ligne, etc.

Points de mise en page

1. Flèche triangulaire

Dessinez un rectangle de 26rpx*26rpx, faites-le pivoter de 45 degrés, puis cachez-en la moitié pour former un triangle rectangle sur la bulle.

<!-- 画三角箭头 -->
 <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 change le sens du flux

prend respectivement la valeur ['row' | 'row-reverse'], de sorte que l'avatar du message envoyé par le l'autre partie est à gauche et l'avatar du message envoyé par vous-même est à gauche. L'avatar du message est à droite.

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

3. Appuyez et maintenez pour parler et centrer la couche suspendue horizontalement et verticalement

Option 1, calcul manuel 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;">

Option 2, pur CSS

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

Après comparaison, l'option 2 est meilleure que l'option 1

Cercle JS

1. Touchez l'événement pour réaliser un glissement vers le haut pour annuler la voix. saisie

Appuyez et il apparaîtra suspendu. Si vous glissez au-delà d'une certaine distance, une invite d'annulation apparaîtra. Lâchez prise et annulez si vous glissez vers le haut, lâchez prise et envoyez

.

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. Après avoir envoyé le message, faites défiler jusqu'à la fin de la 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}}">

Recommandations associées :

Mise en œuvre de l'interaction entre mini programme et arrière-plan (avec code)

Code complet pour le chargement automatique du mini programme

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!