茅臺(tái)集網(wǎng)頁設(shè)計(jì)要是用HTML DIV+CSS JS等來完成頁面的排版設(shè)計(jì)。

網(wǎng)頁有搜素框 導(dǎo)航欄 js圖片輪播；

網(wǎng)頁由網(wǎng)站首頁，公司簡介，公司發(fā)展歷程，最新新聞動(dòng)態(tài)組成；

具體效果圖展示：

目介紹

采用html5+css3+Zepto+swiper+wcPop+flex等技術(shù)開發(fā)的聊天實(shí)例。實(shí)現(xiàn)發(fā)送消息/表情，圖片/視頻預(yù)覽，添加好友/群聊，語音模塊，地圖定位模塊，整體功能界面效果類似微信聊天。

使用技術(shù)

效果演示

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

了解Flex布局

Flex | Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。

https://www.runoob.com/w3cnote/flex-grammar.html

2009年，W3C提出了一種新的方案—-Flex布局，可以簡便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。Flex 布局將成為未來布局的首選方案。

采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flex item），簡稱”項(xiàng)目”。

如上圖：容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）

想要了解Flex布局更多的用法，可以去網(wǎng)上查閱相關(guān)資料，這里不作詳細(xì)概述了。

下拉刷新插件mescroll

mescroll | 精致的下拉刷新和上拉加載 js框架.支持vue,完美運(yùn)行于移動(dòng)端和主流PC瀏覽器。

http://www.mescroll.com/

https://github.com/mescroll/mescroll

注意：如果你是uni-app開發(fā)者，下面是mescroll的uniapp版本

http://www.mescroll.com/uni.html

運(yùn)行效果圖

彈窗組件wcPop

wcpop是一個(gè)手機(jī)端彈窗插件，提供了多種類型的彈窗功能，有ios、android彈窗效果

// 基本使用
wcPop({ 
  //傳入?yún)?shù)
})

如上圖 彈窗菜單，使用下面代碼即可實(shí)現(xiàn)

$("#J_chatList").on("contextmenu", ".item", function (e) {
	e.preventDefault();
	
	//獲取長按坐標(biāo)點(diǎn)
	var _points = [e.pageX, e.pageY];
	
	wcPop({
		skin: 'contextmenu',
		follow: _points,
		opacity: 0,
		btns: [
			{
				text: '發(fā)送給朋友',
				style: 'color:#212121;',
				onTap() {...}
			}, 
			{text: '復(fù)制'}, 
			{text: '收藏'},
			{text: '撤回'},
			{text: '刪除'},
		]
	});
});

聊天功能模塊

• 滾動(dòng)聊天消息至最底部

function wchat_ToBottom() {
	$(".mescroll").animate({ scrollTop: $("#J__chatMsgList").height() }, 0);
}

• 獲取光標(biāo)位置 | 在光標(biāo)處插入表情

// 定義最后光標(biāo)位置
var _lastRange = null, _sel = window.getSelection && window.getSelection();
var _rng = {
	getRange: function () {
		if (_sel && _sel.rangeCount > 0) {
			return _sel.getRangeAt(0);
		}
	},
	addRange: function () {
		if (_lastRange) {
			_sel.removeAllRanges();
			_sel.addRange(_lastRange);
		}
	}
}

// 聊天插入表情
$("#J__swiperEmotion").on("click", ".face_item", function () {
	var that = $(this), range;
	
	var img = that[0].cloneNode(true);
	if (!_editor.childNodes.length) {
		_editor.focus();
	}
	_editor.blur(); //輸入表情時(shí)禁止輸入法

	setTimeout(function () {
		if (document.selection && document.selection.createRange) {
			document.selection.createRange().pasteHTML(img);
		} else if (window.getSelection && window.getSelection().getRangeAt) {
			range = _rng.getRange();
			range.insertNode(img);
			range.collapse(false);
			
			//記錄當(dāng)前光標(biāo)位置 (否則光標(biāo)會(huì)跑到表情前面)
			_lastRange = range;
			_rng.addRange();
		}
	}, 10);
});

• 判斷編輯框信息是否為空

function isEmpty() {
	var html = $editor.html();
	html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n");
	html = html.replace(/<[^img].*?>/ig, "");
	html = html.replace(/ /ig, "");
	return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";
}

?? 最后

如果你覺得這篇文章對你有幫助，麻煩點(diǎn)個(gè)「關(guān)注/轉(zhuǎn)發(fā)」，讓更多的人也能看到你的分享！