果展示

選中樣式制作

• 將每個(gè) tab 設(shè)置固定寬度。
• 每個(gè)tab 添加相對(duì)定位，居中，行高
• 添加偽類，偽類設(shè)置絕對(duì)定位，在底部。
• 設(shè)置偽類的寬度為 0%（偽類會(huì)繼承該元素的寬度）
• 設(shè)置選中時(shí)候的偽類寬度為50%（視情況而定）
• 給元素添加過(guò)渡樣式

HTML代碼(wxml)

			
				{{item.name}}
			

CSS(less)：

		.nav-bar{
			position: relative;
			z-index: 10;
			height: 90upx;
			white-space: nowrap;
			background-color: #fbfbfb;
			
			.nav-item{
				display: inline-block;
				width: 150upx;
				height: 90upx;
				text-align: center;
				line-height: 90upx;
				font-size: 30upx;
				color: #a4a4a4;
				position: relative;
			}
			
			.current{
				color: #3f3f3f;
				font-weight: bold;
			}
		}

實(shí)現(xiàn)效果大致為這樣的：

拓展

PS: 以上為純CSS實(shí)現(xiàn)部分，如果項(xiàng)目 tab數(shù)量 為通過(guò)接口動(dòng)態(tài)獲取的，可以適當(dāng)加入一些 js 計(jì)算。

JS 思路：

• 獲取當(dāng)前選中的 tab 的寬度
• 獲取當(dāng)前選中 tab 以及它之前全部 tab 的寬度總和。
• 獲取當(dāng)前屏幕寬度
• 判斷當(dāng)前選中 tab 是否超過(guò)屏幕中心點(diǎn)（當(dāng)前選中 tab 以及它之前全部 tab 的寬度總和 - 當(dāng)前選中 tab 寬度/2）
• 移動(dòng)當(dāng)前 tabs 到屏幕的重心點(diǎn)位置

大致為（以微信小程序?yàn)槔?/strong>

				let width=0; // 當(dāng)前選中選項(xiàng)卡及它之前的選項(xiàng)卡之和總寬度
				let nowWidth=0; // 當(dāng)前選項(xiàng)卡的寬度
				//獲取可滑動(dòng)總寬度
				for (let i=0; i <=index; i++) {
					let result=await this.getElSize('tab' + i);
					width +=result.width;
					if(i===index){
						nowWidth=result.width;
					}
				}
				// console.log(width, nowWidth, windowWidth)
				//等待swiper動(dòng)畫(huà)結(jié)束再修改tabbar
				this.$nextTick(()=> {
					if (width - nowWidth/2 > windowWidth / 2) {
						//如果當(dāng)前項(xiàng)越過(guò)中心點(diǎn)，將其放在屏幕中心
						this.scrollLeft=width - nowWidth/2 - windowWidth / 2;
						console.log(this.scrollLeft)
					}else{
						this.scrollLeft=0;
					}
					if(typeof e==='object'){
						this.tabCurrentIndex=index; 
					}
					this.tabCurrentIndex=index; 
				})

ps: getElSize() 函數(shù)代碼為：

			getElSize(id) { 
				return new Promise((res, rej)=> {
					let el=uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data)=> {
						res(data);
					}).exec();
				});
			},

這樣就可以實(shí)現(xiàn)動(dòng)態(tài) tab 切換了：

件

插件安裝方式，ctrl+shift+p輸入install packages

CSS3:支持CSS3里的語(yǔ)法高亮。(Sublime3里自帶的CSS高亮不夠用)。安裝后, 打開(kāi)一個(gè)CSS文件，然后按照下面GIF操作，將CSS3高亮作為CSS文件的默認(rèn)高亮。

livestyle：調(diào)試后實(shí)時(shí)更新頁(yè)面。安裝這個(gè)還需要安裝谷歌的插件。

Emmet:快速生成代碼，用過(guò)h5build的應(yīng)該知道。ul*li*3相當(dāng)于:

<ul><li></li><li></li><li></li></ul>

記下語(yǔ)法就ok.

ConvertToUTF8：編碼轉(zhuǎn)utf8

CSScomb:css屬性排序

html5：html規(guī)范包，輸入html+tab生成html規(guī)范文檔

Alignment：代碼對(duì)齊，快捷鍵ctrl alt a

Autoprefixer插件:css3私有前綴自動(dòng)補(bǔ)全插件

AutoFileName：自動(dòng)完成文件名的輸入，如圖片選取，快捷輸入文件名路徑補(bǔ)全

less sass插件

JsFormat js格式化插件

Terminal 命令行插件

Minify 代碼美化壓縮插件

Color Highlighter 顏色選擇插件

快捷鍵

Ctrl+D 選中光標(biāo)所占的文本，繼續(xù)操作則會(huì)選中下一個(gè)相同的文本。

Alt+F3 選中文本按下快捷鍵，即可一次性選擇全部的相同文本進(jìn)行同時(shí)編輯。舉個(gè)栗子：快速選中并更改所有相同的變量名、函數(shù)名等。

Ctrl+L 選中整行，繼續(xù)操作則繼續(xù)選擇下一行，效果和 Shift+↓ 效果一樣。

Ctrl+Shift+L 先選中多行，再按下快捷鍵，會(huì)在每行行尾插入光標(biāo)，即可同時(shí)編輯這些行。

Ctrl+Shift+M 選擇括號(hào)內(nèi)的內(nèi)容（繼續(xù)選擇父括號(hào)）。舉個(gè)栗子：快速選中刪除函數(shù)中的代碼，重寫(xiě)函數(shù)體代碼或重寫(xiě)括號(hào)內(nèi)里的內(nèi)容。

Ctrl+M 光標(biāo)移動(dòng)至括號(hào)內(nèi)結(jié)束或開(kāi)始的位置。

Ctrl+Enter 在下一行插入新行。舉個(gè)栗子：即使光標(biāo)不在行尾，也能快速向下插入一行。

Ctrl+Shift+Enter 在上一行插入新行。舉個(gè)栗子：即使光標(biāo)不在行首，也能快速向上插入一行。

Ctrl+Shift+[ 選中代碼，按下快捷鍵，折疊代碼。

Ctrl+Shift+] 選中代碼，按下快捷鍵，展開(kāi)代碼。

Ctrl+K+0 展開(kāi)所有折疊代碼。

Ctrl+← 向左單位性地移動(dòng)光標(biāo)，快速移動(dòng)光標(biāo)。

Ctrl+→ 向右單位性地移動(dòng)光標(biāo)，快速移動(dòng)光標(biāo)。

shift+↑ 向上選中多行。

shift+↓ 向下選中多行。

Shift+← 向左選中文本。

Shift+→ 向右選中文本。

Ctrl+Shift+← 向左單位性地選中文本。

Ctrl+Shift+→ 向右單位性地選中文本。

Ctrl+Shift+↑ 將光標(biāo)所在行和上一行代碼互換（將光標(biāo)所在行插入到上一行之前）。

Ctrl+Shift+↓ 將光標(biāo)所在行和下一行代碼互換（將光標(biāo)所在行插入到下一行之后）。

Ctrl+Alt+↑ 向上添加多行光標(biāo)，可同時(shí)編輯多行。

Ctrl+Alt+↓ 向下添加多行光標(biāo)，可同時(shí)編輯多行。

Ctrl+J 合并選中的多行代碼為一行。舉個(gè)栗子：將多行格式的CSS屬性合并為一行。

Ctrl+Shift+D 復(fù)制光標(biāo)所在整行，插入到下一行。

Tab 向右縮進(jìn)。

Shift+Tab 向左縮進(jìn)。

Ctrl+K+K 從光標(biāo)處開(kāi)始刪除代碼至行尾。

Ctrl+Shift+K 刪除整行。

Ctrl+/ 注釋單行。

Ctrl+Shift+/ 注釋多行。

Ctrl+K+U 轉(zhuǎn)換大寫(xiě)。

Ctrl+K+L 轉(zhuǎn)換小寫(xiě)。

Ctrl+Z 撤銷。

Ctrl+Y 恢復(fù)撤銷。

Ctrl+U 軟撤銷，感覺(jué)和 Gtrl+Z 一樣。

Ctrl+F2 設(shè)置書(shū)簽

Ctrl+T 左右字母互換。

F6 單詞檢測(cè)拼寫(xiě)

Ctrl+F 打開(kāi)底部搜索框，查找關(guān)鍵字。

Ctrl+shift+F 在文件夾內(nèi)查找，與普通編輯器不同的地方是sublime允許添加多個(gè)文件夾進(jìn)行查找，略高端，未研究。

Ctrl+P 打開(kāi)搜索框。舉個(gè)栗子：1、輸入當(dāng)前項(xiàng)目中的文件名，快速搜索文件，2、輸入@和關(guān)鍵字，查找文件中函數(shù)名，3、輸入：和數(shù)字，跳轉(zhuǎn)到文件中該行代碼，4、輸入#和關(guān)鍵字，查找變量名。

Ctrl+G 打開(kāi)搜索框，自動(dòng)帶：，輸入數(shù)字跳轉(zhuǎn)到該行代碼。舉個(gè)栗子：在頁(yè)面代碼比較長(zhǎng)的文件中快速定位。

Ctrl+R 打開(kāi)搜索框，自動(dòng)帶@，輸入關(guān)鍵字，查找文件中的函數(shù)名。舉個(gè)栗子：在函數(shù)較多的頁(yè)面快速查找某個(gè)函數(shù)。

Ctrl+： 打開(kāi)搜索框，自動(dòng)帶#，輸入關(guān)鍵字，查找文件中的變量名、屬性名等。

Ctrl+Shift+P 打開(kāi)命令框。場(chǎng)景栗子：打開(kāi)命名框，輸入關(guān)鍵字，調(diào)用sublime text或插件的功能，例如使用package安裝插件。

Esc 退出光標(biāo)多行選擇，退出搜索框，命令框等。

Ctrl+Tab 按文件瀏覽過(guò)的順序，切換當(dāng)前窗口的標(biāo)簽頁(yè)。

Ctrl+PageDown 向左切換當(dāng)前窗口的標(biāo)簽頁(yè)。

Ctrl+PageUp 向右切換當(dāng)前窗口的標(biāo)簽頁(yè)。

Alt+Shift+1 窗口分屏，恢復(fù)默認(rèn)1屏（非小鍵盤(pán)的數(shù)字）

Alt+Shift+2 左右分屏-2列

Alt+Shift+3 左右分屏-3列

Alt+Shift+4 左右分屏-4列

Alt+Shift+5 等分4屏

Alt+Shift+8 垂直分屏-2屏

Alt+Shift+9 垂直分屏-3屏

Ctrl+K+B 開(kāi)啟/關(guān)閉側(cè)邊欄。

F11 全屏模式

Shift+F11 免打擾模式