Composant de conversation de développement d'applet WeChat : peut être utilisé pour les conversations de chat du service client en ligne

php是最好的语言

Libérer： 2018-08-01 10:15:52

original

9104 Les gens l'ont consulté

Utilisez un petit programme pour créer une session de chat, qui peut être utilisée pour les sessions de chat du service client en ligne, etc. Ce qui suit est une explication détaillée du code Il est également très simple à utiliser.

Composant de conversation de développement dapplet WeChat : peut être utilisé pour les conversations de chat du service client en ligne

Session de chat

Scénario

Conversation par chat pour le service client en ligne, etc.

Points de mise en page

1. 🎜 >

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>

Copier après la connexion

/* 三角箭头 */.body .triangle {    background: white;    width: 20rpx;    height: 20rpx;    margin-top: 26rpx;    transform: rotate(45deg);    position: absolute;
}

Copier après la connexion

2. Flex-flow change la direction du flux

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

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

Copier après la connexion

3. Appuyez et maintenez pour parler et centrer le calque flottant horizontalement et verticalement

Option 1, calcul manuel js

data: {    hud_top: (wx.getSystemInfoSync().windowHeight - 150) / 2,
    hud_left: (wx.getSystemInfoSync().windowWidth - 150) / 2,
}

Copier après la connexion

<view class="hud-container" wx:if="{{status != state.normal}}" style="top: {{hud_top}}px; left: {{hud_left}}px;">

Copier après la connexion

Option 2 , pur css

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

Copier après la connexion

Après comparaison, le plan 2 est meilleur que le plan 1

Cercle JS

1. Événement tactile pour réaliser un glissement vers le haut pour annuler la saisie vocale<🎜. >

Appuyez sur Il y aura une suspension et une invite d'annulation apparaîtra lorsque le balayage vers le haut dépasse une certaine distance. Lâchez prise et annulez lorsque le balayage vers le haut n'a pas dépassé, relâchez 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();
  },

Copier après la connexion

<. 🎜> 2. Après avoir envoyé le message, faites défiler jusqu'à la fin de la page

data: {  toView: &#39;&#39;}

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

Copier après la connexion

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

Copier après la connexion