?今天是使用VUE.js實(shí)戰(zhàn)項(xiàng)目的第二天杠河，今天主要學(xué)習(xí)了better-scroll組件實(shí)現(xiàn)移動(dòng)端頁(yè)面的滑動(dòng)珠洗、回到頂部按鈕和上拉加載更多信息三個(gè)功能惯退。
1.better-scroll組件：該組件是比較好用的一個(gè)實(shí)現(xiàn)頁(yè)面滑動(dòng)效果的組件顾孽，具體使用起來(lái)其實(shí)并不是非常好用
Q1：created函數(shù)和mounted函數(shù)的差異一定要區(qū)分開(kāi)碧绞，如果把better-scroll組件聲明到created函數(shù)中的話府框，是沒(méi)法獲取里面聲明的數(shù)據(jù)的。
Q2:昨天學(xué)習(xí)的更多是父組件向子組件中傳遞值----props屬性的使用方法讥邻，而今天更多的是使用到子組件向父組件傳遞信息---$emit屬性迫靖。其中傳遞過(guò)程中，在父組件頁(yè)面中的綁定的屬性的命名規(guī)則有了更加更加深刻的理解兴使，這讓我以后實(shí)現(xiàn)相應(yīng)的數(shù)據(jù)傳遞功能時(shí)不會(huì)再向以前覺(jué)得那么茫然了系宜。
Q3：better-scroll本質(zhì)上人家造好的輪子，這也是我在項(xiàng)目中首次使用輪子发魄，今天對(duì)輪子功能的學(xué)習(xí)加深了我對(duì)使用輪子的理解盹牧，其中最重要的一點(diǎn)就是，你必須要了解輪子里面封裝好的方法和數(shù)據(jù)的傳遞規(guī)則励幼，這其實(shí)是非常重要的汰寓。
2.回到頂部按鈕功能：
首先分析一下回到頂部按鈕的功能邏輯：首先需要獲取頁(yè)面的滑動(dòng)高度即position屬性，當(dāng)頁(yè)面達(dá)到某個(gè)設(shè)定好的屬性時(shí)苹粟，即觸發(fā)判斷條件有滑，來(lái)讓回到頂部按鈕起效過(guò)，具體按鈕回到頂部的實(shí)現(xiàn)同樣是由于better-scroll封裝好實(shí)現(xiàn)的嵌削。
具體實(shí)現(xiàn)：首先我們需要獲取頁(yè)面的Positon,根據(jù)我們的分析毛好，這個(gè)回到頂部按鈕不僅僅是在我們Home.vue頁(yè)面中使用的，因此該功能可以作為一個(gè)組件單獨(dú)進(jìn)行封裝掷贾，方便后續(xù)的多個(gè)頁(yè)面進(jìn)行復(fù)用睛榄。因此我首先在scroll.vue里面聲明了這個(gè)事件，并通過(guò)$emit事件把這個(gè)事情傳遞出去想帅。
該功能有一個(gè)難點(diǎn)场靴，如果按照正常邏輯來(lái)分析，這個(gè)事件的傳遞是子組件scroll 傳遞給父組件Home然后再傳遞給子組件back-top這樣一個(gè)兄弟通信港准，實(shí)際上實(shí)現(xiàn)起來(lái)會(huì)相對(duì)來(lái)說(shuō)非常復(fù)雜旨剥。
此處采取直接監(jiān)聽(tīng)組件來(lái)進(jìn)行操作是一個(gè)非常好的方法，但實(shí)際上我們是不能夠直接給整個(gè)子組件綁定信息的浅缸，因此這里使用到了.native方法直接綁定子組件進(jìn)行事件操作轨帜。
上拉加載更多這一個(gè)功能，由于視頻中的better-scroll的版本太久遠(yuǎn)了現(xiàn)在的版本已經(jīng)不支持pullingUp這一個(gè)功能了（或許是需要加載新的插件）衩椒，因此我換成了現(xiàn)場(chǎng)使用的touchEnd 即點(diǎn)擊加載蚌父，實(shí)際上該功能點(diǎn)的核心也是在后臺(tái)$emit事件發(fā)送出來(lái)哮兰，然后在父組件中 綁定這一屬性，并給他具體的判斷邏輯即可
