小程式聊天會話元件

2021-08-22 08:20:21 字數 977 閱讀 7118

場景

一、布局圈點

1、三角箭頭

繪製乙個26rpx*26rpx矩形,使它旋轉45度,然後隱去對半,形成氣泡上的直角三角形。

/* 三角箭頭 */

.body .********

2、flex-flow改變流動方向

分別取值['row' | 'row-reverse'],實現對方發來的訊息頭像居左,自己發的訊息頭像居右。

3、按住說話懸浮層水平與垂直居中

方案1,js手工計算

data: 

方案2,純css

/*懸浮提示框*/

.hud-container

經過對比,方案2要優於方案1

js圈點

一、touch事件實現上滑取消語音輸入

按下出現懸浮,上滑到超過一定位移出現取消提示,鬆手取消;上滑未超過,鬆手傳送

touchstart: function (e) );

}, touchmove: function (e) );

}, touchend: function (e) );

// 不論如何,都結束錄音

this.stop();

},

二、傳送訊息完畢滾到頁尾

Socket 聊天小程式

伺服器端 server.c include include include include include include include in.h include include include define buflen 1024 define port 6666 define listnum ...

LINUX同步聊天小程式

檔名 tcp client.c 檔案描述 tcp迴圈伺服器客戶端 xue,2012 07 26 include include include include include include include include define buffer 1024 define port 7777 in...

Python實現聊天小程式

import socket import sys host port 10001 server socket socket.socket socket.af inet,socket.sock stream server socket.setsockopt socket.sol socket,sock...