邊框也可以改顏色的，舉個(gè)項(xiàng)目中的例子，按照這種格式去改顏色（本文例子有css代碼的話基本都是stylus的寫法）：

對(duì)應(yīng)頁面：

在移動(dòng)端開發(fā)中，某些機(jī)型、某些瀏覽器上，click點(diǎn)擊事件要延遲300ms執(zhí)行。

要解決這個(gè)問題，我們引入個(gè)fastclick庫

npm install fastclick --save

--save的意思是：不管在開發(fā)環(huán)境測(cè)試，還是線上跑代碼，安裝了的庫都可以使用。并且下載好后，自動(dòng)存到package.json的dependencies屬性中，比如這里install的fastclick：

然后在入口函數(shù)main.js中引入和使用：

import fastClick from "fastclick"、
fastClick.attach(document.body)

先在阿里巴巴矢量圖標(biāo)庫創(chuàng)建一個(gè)項(xiàng)目

然后在iconfont上選購，添加到購物車，選好后添加到自己的項(xiàng)目，然后下載到本地。

下載的東西中只要用到這幾個(gè)：

然后把iconfont.css放到一個(gè)文件夾中并且在入口函數(shù)main.js處引入后就可以全局使用了。

舉個(gè)使用的例子:

注意類名要加iconfont，然后這里在span里輸入的代碼就是你選中的圖標(biāo)的代碼：

這步其實(shí)應(yīng)該穿插在做項(xiàng)目過程中進(jìn)行的，這里先列出來。

在build文件夾下的webpack.base.conf.js中配置，如下圖，圈起來的是我在項(xiàng)目中配置的。

這樣有配置后就可以使用自定義目錄了。比如按照我上面的配置的話

import src/assets/styles/border.css

就可以寫成

import styles/border.css了。

這里使用的是 vue-awesome-swiper。

先安裝： npm install vue-awesome-swiper --save

然后用法一些的其實(shí)都可以在其文檔中查閱到：

鑒于在各個(gè)頁面都可能會(huì)用到輪播功能,所以直接在全局也就是入口文件 main.js 處引入。

然后使用：

比如要使用按鈕區(qū)的話，就需要配置參數(shù)。根據(jù)個(gè)人在項(xiàng)目中的需求，可以查閱其github文檔按需使用。

比如這個(gè)test。在網(wǎng)速慢慢加載的時(shí)候，可能test會(huì)先在上面顯示，然后等圖片撐開區(qū)域的時(shí)候再跑回下面。

為了防止這種抖動(dòng)，最好這樣子做：

給輪播swiper外面套一層類為wrapper的div，然后給div固定大小。比如在項(xiàng)目中這里的輪播圖片的寬高比是 364:97 約等于 3.75，高度是寬度的百分之 26.6。

所以響應(yīng)式開發(fā)可以這樣給div框樣式：

現(xiàn)在vw單位的兼容性其實(shí)可以了。

有種兼容性很好的方案：

overflow: hidden
width: 100%
height: 0
padding-bottom: 26.6%

這種方式也是高度是寬度的 26.6%。

其實(shí)吧。。這個(gè)vue-aowsome-swiper組件目前為止已經(jīng)不存在這種抖動(dòng)問題了。。

比如插件按鈕區(qū)配置后，默認(rèn)按鈕顏色是藍(lán)色小圓點(diǎn)。

審查元素可以看出：

那我們?nèi)缦逻@樣子加樣式去改變行嗎？

一般這樣子問都是不行滴...

因?yàn)橛衧coped作用域的原因，這個(gè)類的屬性的設(shè)置是在原本的 swiper組件下，而不是在我們這里設(shè)置的swiper組件下。

應(yīng)該這樣設(shè)置：

意思是在.wrapper下的所有類中，找.swiper-pagination-bullet-active類。

>>>是具有穿透作用域的意思，穿透其他組件的作用域。

比如，這里是個(gè)p標(biāo)簽。

P標(biāo)簽里的數(shù)據(jù)太多的話 希望顯示一個(gè) ... 省略號(hào)。

可以這樣利用text-overflow屬性:

要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果，應(yīng)該在定義兩個(gè)樣式：強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）和溢出內(nèi)容為隱藏（overflow:hidden），只有這樣才能實(shí)現(xiàn)溢出文本顯示為省略號(hào)效果。

一般情況下在mounted鉤子里發(fā)送ajax請(qǐng)求數(shù)據(jù)。想詳細(xì)了解生命周期 => 我有寫過一篇文章

請(qǐng)求方式，看自己，這個(gè)項(xiàng)目中axios、fetch兩個(gè)方式我都寫過。

首先，用vue腳手架工具生成的工程里面，只有static目錄（靜態(tài)文件目錄）下，才能被外界訪問到。

我們就把本地的一些模擬數(shù)據(jù)放在這個(gè)static目錄下，自己建個(gè)文件夾存儲(chǔ)數(shù)據(jù)。這個(gè)項(xiàng)目中是static/mock/index.json：

這數(shù)據(jù)是本地的模擬數(shù)據(jù)，我們不希望到時(shí)候一起把它push到線上，可以在.gitignore里這樣配置：

現(xiàn)在這個(gè)文件夾下的所有東西都不會(huì)被傳到線上了。

當(dāng)然，也不會(huì)提交到本地的git倉庫里面。

這樣配置還不夠，目前在局部根組件中寫的請(qǐng)求的路徑是這樣的，拿項(xiàng)目中舉例：

當(dāng)我們上線這代碼的時(shí)候，我們請(qǐng)求的網(wǎng)址，最好前面加上個(gè)‘a(chǎn)pi’，如下面的紅框中：/api/index.json 這樣子最好了。

很好的是，恰好Vue腳手架里面有這樣一個(gè)轉(zhuǎn)發(fā)的代理功能。通過這個(gè)功能，就可以實(shí)現(xiàn)以上構(gòu)想。

config配置文件下，有個(gè) index.js 腳本，官方給我們提供了一個(gè) proxyTable{} 的配置項(xiàng)，我們可以這樣配置：

這意思是：當(dāng)我們請(qǐng)求api的時(shí)候，依然映射到本地8080端口，然后訪問任何以api為開頭的url的時(shí)候，做一個(gè)路徑替換，代理訪問到 /static/mock 處。

實(shí)際這功能 是webpack-dev-sever提供的。

改過配置文件，需要重啟下服務(wù)器，重啟后就可以如下請(qǐng)求數(shù)據(jù)了：

這里實(shí)際上訪問的就是static/mock/index.json里的內(nèi)容了。

如果可以的話，最好能在局部根組件里請(qǐng)求一次ajax數(shù)據(jù)，然后從局部根組件里把接收到的數(shù)據(jù)分別傳給各個(gè)局部的子組件，而不是每個(gè)局部的子組件都發(fā)送一次ajax請(qǐng)求。

這里是這樣寫的css

現(xiàn)在在輸入框里面輸入文字字符超過輸入框大小時(shí)：

這兩部會(huì)貼著,不那么好看。想要給這個(gè)輸入框加個(gè)padding，留點(diǎn)間隙會(huì)更好。

但直接在input下面加行嗎？

頁面：

因?yàn)榘黫nput框的div沒設(shè)置width，也就是width是auto。input框的width設(shè)置的是100%。

如果直接給input加padding左右一點(diǎn)的話是會(huì)撐開input框的寬度的。所以會(huì)溢出。

那怎樣解決這個(gè)問題呢？

我們只是想設(shè)置一個(gè)左右padding值，沒想讓input框長寬變化。所以，我們?cè)?Input 下面加個(gè)：box-sizing: border-box

這樣的話，我們直接給input設(shè)置的寬高就包括了padding、border在內(nèi)的寬高了。

此時(shí)我們要修改padding的值的話，就只會(huì)在這個(gè)框內(nèi)變化 不會(huì)撐開框?qū)捀吡恕?/p>

初始開發(fā)頁面時(shí)，到這步，因?yàn)榧恿吮容^多字母對(duì)應(yīng)的區(qū)域，頁面出現(xiàn)了滾動(dòng)條的時(shí)候：

為了使用better-scroll庫，我們僅讓列表區(qū)域顯示到剛進(jìn)頁面時(shí)能顯示到的區(qū)域就行了，不需要出現(xiàn)滾動(dòng)條。所以可以給最外層的包裹整個(gè)列表區(qū)域的框div.list 加個(gè)overflow: hidden就行了。（整個(gè)列表頁指下圖中的從當(dāng)前城市開始到最后，城市選擇和輸入框是其他子組件寫的了）

接下來具體better-scroll的用法，github上其文檔有說明，各人可根據(jù)具體情況查閱使用。

點(diǎn)擊事件中，我們需要查看點(diǎn)擊的內(nèi)容時(shí)，可以利用點(diǎn)擊事件的事件對(duì)象

在Vue的一個(gè)點(diǎn)擊事件里，在methods定義點(diǎn)擊方法時(shí)這個(gè)方法可以接收一個(gè)參數(shù)e，e就是我們點(diǎn)擊到的那個(gè)事件對(duì)象。

要拿到我們點(diǎn)擊到的事件對(duì)象的內(nèi)容 可以這樣來：e.target.innerText

舉個(gè)項(xiàng)目中的例子驗(yàn)證一下：

比如此時(shí)頁面上點(diǎn)擊了 D F J

當(dāng)點(diǎn)擊到相應(yīng)的字母的時(shí)候顯示list組件的對(duì)應(yīng)城市的區(qū)域。

better-scroll這個(gè)第三方插件有個(gè)方法可以實(shí)現(xiàn)這個(gè)需求，思路是：

監(jiān)聽所點(diǎn)擊的字母表里字母的值letter的變化，一旦letter變了，就利用better-scroll的提供的一個(gè)接口，如下圖劃線的部分

它會(huì)讓better-scroll的滾動(dòng)區(qū)域，自動(dòng)滾動(dòng)到某一個(gè)元素上。需要給這個(gè)方法傳遞我們滾動(dòng)到該元素的該元素DOM。

利用這個(gè)思路就可以實(shí)現(xiàn)需求1了。

手指拖動(dòng)字母表，字母對(duì)應(yīng)的列表跟著聯(lián)動(dòng)展示。

思路：

利用touchstart、touchmove、touchend事件，并給個(gè)限制（touchStatus） 只當(dāng)手指在屏幕移動(dòng)的時(shí)候才執(zhí)行一些操作。然后用個(gè)數(shù)組letters來存放字母表的所有字母，這里的letters大概是["A","B","C"...]，并讓頁面v-for這個(gè)letters來顯示相應(yīng)的內(nèi)容。用數(shù)組存放這些字母的原因也是為了實(shí)現(xiàn)這需求的主要思想：根據(jù)下標(biāo)，找到對(duì)應(yīng)的字母。

接下來，先用offsetTop找到字母表中字母A距離包裹它的頂部的高度。下圖紅框。

這里的74 代表的是紅色方框的高度。

然后獲取移動(dòng)時(shí)手指所在的高度，此高度時(shí)針對(duì)于客戶端的高度，用clientY。
touchmove事件有個(gè)事件對(duì)象，事件對(duì)象里有個(gè)touches數(shù)組，touches[0]里面就有當(dāng)前手指的信息，包括clientY屬性。

實(shí)時(shí)獲取我們手指的位置。

我們要獲取距離包裹塊的高度 => 也就是clientY的高度要減去headers區(qū)和serach區(qū)的高度，這兩個(gè)區(qū)高度是 79px。

然后算我們手指移到的字母在數(shù)組中的下標(biāo) 邏輯是 (touchY - startY)/每個(gè)字母的高度，再把結(jié)果向下取個(gè)整。

最后，把這個(gè)下標(biāo)在letters數(shù)組中對(duì)應(yīng)的字母?jìng)鹘o需求1所在的組件利用需求1的思路就行了。（這里的傳值涉及到了兄弟組件之間的傳值，此時(shí)該頁面比較簡單不建議用vuex，可以用event bus/找同一父組件做媒介傳值，具體方法百度。）

在我項(xiàng)目中最終邏輯代碼是這樣寫的：

最后做個(gè)最佳實(shí)踐，用個(gè)if，確保 index的值。

第一處

handleTouchMove是手指滑動(dòng)的時(shí)候就會(huì)執(zhí)行，而我們框起來的也就是A字母距離包裹框的高度是固定的，不用每次滑動(dòng)的都執(zhí)行這段代碼。

所以此處需要優(yōu)化，這樣子來：

在data里初始化startY為0

然后用生命周期鉤子 updated 去執(zhí)行給startY賦值的語句

這里為什么用updated這個(gè)鉤子呢？在項(xiàng)目中初次渲染字母表組件alphabet.vue的時(shí)候，從它父組件City.vue傳過來的值是一個(gè)空對(duì)象。當(dāng)City.vue里ajax動(dòng)態(tài)獲取數(shù)據(jù)后，從City再傳到alphabet的值讓數(shù)據(jù)從初次的空對(duì)象發(fā)生改變。在數(shù)據(jù)更新完畢后，就觸發(fā)了updated鉤子，此時(shí)給startY賦值就是值都有，而且只會(huì)賦一次。

第二處：函數(shù)節(jié)流

通過函數(shù)節(jié)流 減少handleTouchMove()的執(zhí)行頻率 （因?yàn)槲覀兪种冈诨瑒?dòng)的時(shí)候 該函數(shù)執(zhí)行頻率很高的）。

怎樣使得函數(shù)節(jié)流呢？

通過定時(shí)器和清除定時(shí)器來實(shí)現(xiàn)。

先在data中初始化timer為 null，然后這樣來用

這樣子用定時(shí)器進(jìn)行函數(shù)節(jié)流的話 ：

如果已經(jīng)正在做這件事情的時(shí)候，我呢，讓它延遲16ms之后再去執(zhí)行。假設(shè)在這16ms之間你又去做了手指的滾動(dòng)，那么它會(huì)把上一次你要做的操作給清除掉（clearTimeout），然后重新執(zhí)行你這次要做的事情 （等于以最終的手指滑動(dòng)的位置為準(zhǔn) ）。

通過這種函數(shù)節(jié)流方式，會(huì)大大減少該函數(shù)的執(zhí)行次數(shù)，從而提高網(wǎng)頁性能。

函數(shù)節(jié)流的方式，當(dāng)一個(gè)函數(shù)執(zhí)行次數(shù)很多想要減少而且減少也沒影響的時(shí)候，是很有必要采用的一種方式。

可能用戶會(huì)有不小的概率關(guān)閉了本地自動(dòng)存儲(chǔ)的功能，一般我們使用localStorage的時(shí)候 都要使用 try catch 代碼塊，這樣就算用戶關(guān)閉本地自動(dòng)存儲(chǔ)功能，也不會(huì)讓整個(gè)代碼都不能運(yùn)行，只是沒了這個(gè)localStorage的功能而已。

舉個(gè)項(xiàng)目中的例子：