HTML5 模倣 WeChat チャット インターフェイスと WeChat Moments サンプル コード

ここ数日、H5 を使用して WeChat 風のチャット フロントエンド インターフェイスを開発しました。特に WeChat の下部エディターは、WeChat ほど包括的ではありませんが、非常にうまく処理されています。 、メッセージ、絵文字を送信し、送信されたメッセージを自動的に下にスクロールして戻すことができます。さらに、メッセージ、写真、ビデオ、報酬、画面占有などのさまざまな処理プロンプトを表示できます。およびその他の操作。

HTMLコードスニペット:

 <!--BEGIN 報酬--><div class=js_dialog id=J_Dialog_dashang style=display: none;> <!--<div class=weui-mask></div>--> <div class=weui- ダイアログ> <i class=weui-xclose></i> <div class=weui-dialog__bd> <!-- //ティッピングテンプレートエリア--> <div class=ws__popup-template> <h2 class=hdTit>お気に入りのプログラムに関するヒント</h2> <div class=item flexbox> <input class=ipt-txt align-l flex1 type=text name=dschooseProgram placeholder=ヒントを選択してください鑑賞プログラム readonly /> </div> <div class=item item-area> <textarea class=describe name=content placeholder=報酬メッセージを 30 単語以内で入力してください (オプション)></textarea> </div> <div class=item item-gift id=J__choose Gift> <div class=gift flexbox selected data-gift=001> <label class =txt><span>高級車</span><em class=time>50 秒間画面を独占します</em></label> <span class=amount>￥<em>12</em> <i class=chkbox></i></span> </div> <div class=gift flexbox data-gift=002> <label class=txt>< span>ムービングローズ</span><em class=time>20 秒間画面を支配します</em></label> <span class=amount>￥<em>8</em> <i class=chkbox></i></span> </div> </div> </div> </div> <div class=weui-dialog__ft> <a href=javascript:;ダイアログ__btn_primary style=background: #ff4400; border-radius: 4px; color: #fff;>お支払い<span>￥<em class=moneyNum>12</em></span> 報酬</a> </div> </div></div><!--END 報酬-->

JavaScript コードスニペット:

 /* -チャットエディターエリア*/var $editor = $(.J__editorText), editor = $editor[0];var $face = $(.emotion-area dd img);$face.on(click, function( e ){ if($(this).hasClass(face)){ //画像 var img = $(this)[0].cloneNode(true); setTimeout(function(){ var範囲、ノード; if(document.selection && document.selection.createRange){ document.selection.createRange().pasteHTML(img); }else if(window.getSelection && window.getSelection().getRangeAt){ range = window .getSelection().getRangeAt(0); range.insertNode(img); var sel = window.getSelection(); sel.addRange(range) } }, 16); // editor.focus(); = window.getSelection().getRangeAt(0); range.collapse(false); sel.removeAllRanges(); sel.addRange(range); document.execCommand(delete) }});//...書式設定エディターには editor.addEventListener(focus, function(evt) { arounds()} , true);editor.addEventListener(input, function(evt) { arounds();}, false);function arounds() { setTimeout(function () { //chrome var sel = window.getSelection(); var anchorNode = sel.anchorNode; if (!anchorNode === editor || (sel.anchorNode.nodeType === 3 && sel. anchorNode.parentNode === エディター)) { var range = sel.getRangeAt(0); document.createElement(p); range.selectNodeContents(p); //chrome sel.collapse(p, 0); { var elems = [].slice.call(editor.children); for (var i = 0, len = elems.length; i < len; i++) { var el = elems[i]; if (el.tagName.toLowerCase() == br) { editor.removeChild(el) } } }, 0; ;}//...チャット コンテンツの一番下までスクロールします。 functionscrollToBottom(){ $('.ws__chatMsg-panel').animate({scrollTop: $(#J__chatMsgList).height()}, 300);}

操作効果：

上記は、編集者が紹介した HTML5 模倣 WeChat チャット インターフェイスと WeChat Moments のサンプル コードです。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！