前面的一到五都會(huì)慢慢補(bǔ)上去的
最近一直在看基于vue.js 2.0的總結(jié),學(xué)到了很多,卻都沒有記下來(心痛,好伐)。被人推薦了markdown編輯器,來簡書試試手感。
寫在前面 vue的prop,data里面的數(shù)據(jù)都是響應(yīng)式的,所以在你初始化數(shù)據(jù)的時(shí)候,一定要先想好是否要讓他可以變化!
這兩天在寫musicList和singerDetail組件的開發(fā),先講講這幾節(jié)課的重點(diǎn)把无虚。
1：路由配置與dom
首先需要配置子路由,路由是由組件承載的
重點(diǎn):路由和組件都是樹狀結(jié)構(gòu),而singerDetail是singer組件下的子路由,結(jié)構(gòu)如圖所示。
但是有了子路由還不夠,需要有個(gè)router-view來渲染它,把router-view寫在singer組件里面,要注意,其實(shí)這時(shí)候并沒有跳轉(zhuǎn)到其他頁面,只是在router-view渲染了組件,然后這個(gè)組件高度寬度100%,zIndex很高,覆蓋住了原來的組件
（keep-alive標(biāo)簽保證router在切換的時(shí)候不會(huì)重復(fù)加載）
listview是之前開發(fā)的組件,歌手信息都在其中,所以當(dāng)你點(diǎn)擊歌手信息要跳轉(zhuǎn)的時(shí)候,由listview的點(diǎn)擊事件發(fā)送一個(gè)自定義事件給父組件singer,父組件使用this.$router.push()跳轉(zhuǎn)
不知道為什么我的vue動(dòng)畫就是出不來,所以就跳過了 有沒有大佬能夠幫幫我(逃)
接下來會(huì)涉及到vueX,這個(gè)我打算專門寫一篇博客來鞏固自己衍锚。友题。,現(xiàn)在只要知道vuex用于較大型項(xiàng)目,在組件和組件之間傳遞數(shù)據(jù),大部分是子組件或者路由跳轉(zhuǎn)
2：歌手?jǐn)?shù)據(jù)抓取和封裝
其實(shí)這個(gè)沒什么好說的,就是課程上講的接口沒用了,我找了好久找到了個(gè)現(xiàn)在可以用的,還有##獲取數(shù)據(jù)的時(shí)機(jī)要在created!!。构拳。重點(diǎn)還是使用 jsonp跨域,這個(gè)我也會(huì)專門寫一篇博客來鞏固自己咆爽。
當(dāng)你直接在singerDetail界面刷新的話,讓他直接回退到singer路由
最重要的是musicData,為了方便,我們把需要的數(shù)據(jù)封裝成一個(gè)song類,這樣到時(shí)候初始化的時(shí)候更方便
封裝好song類之后,可以開始初始化數(shù)組了,把music里面的東西都轉(zhuǎn)化成song類里面的東西,但是你想呀如果你直接new一個(gè)對象,是不是要寫好多東西?比如
requiredList.push(new Song(music.id,mid,singer,name,duration,image,url))巴拉巴拉一大堆的,多麻煩.都說了程序員是懶人,所以我們再寫一個(gè)工廠方法,這樣你到時(shí)候初始化list的時(shí)候就不需要new一大堆啦,只需要
多方便!
3:musicList組件的開發(fā)
首先,musicList組件是singerDetail組件的子組件,應(yīng)該實(shí)現(xiàn)的效果如下圖所示,所以應(yīng)該傳入三個(gè)數(shù)據(jù)給musicList的props,分別是bgImg,songs,title梁棠。這三個(gè)屬性都可以在之前的singerDetail組件里獲取的musicData中獲取,所以這不算難點(diǎn)。
musicList組件里還有一個(gè)子組件(base組件,大部分地方都會(huì)用到)Songlist,往songList里面?zhèn)魅敫枨鷶?shù)組,會(huì)自動(dòng)遍歷出每首歌斗埂。
需要注意的地方:
當(dāng)你給了一個(gè)元素
padding-left(right,top,bottom)為百分比的時(shí)候,它以父元素的寬度為參照物,所以這樣會(huì)制作出一個(gè)長寬比為10:7的元素
vue中綁定style可以如圖所示
接下來,通過對設(shè)計(jì)稿的觀察,我們發(fā)現(xiàn)歌曲列表這個(gè)組件一直被復(fù)用,所以我們把它獨(dú)立出來,所以接下來我們就要開始寫songList組件,它較為簡單,只需要注意他的樣式,我只放一張圖
寫完了songList組件,在musicList中注冊一下,然后再用之前寫過的scroll組件包裹
接下來,我們要想想需要實(shí)現(xiàn)什么效果了
對各個(gè)瀏覽器來講,背景圖的高度是不一樣的,
在寫完上面的musiclist之后,我們基本上算是完成了,但是需要進(jìn)行優(yōu)化!
4: musicList組件的優(yōu)化----上滑的時(shí)候要讓上面的圖片也上滑一段距離
怎么實(shí)現(xiàn)呢? 讓bglayer跟scroll層一樣也往上運(yùn)動(dòng),但是zindex比bgimg高,這樣效果就是遮蓋住了bgimg.這樣就可以做到當(dāng)你上滑list的時(shí)候,圖片被遮擋住的效果.,dom結(jié)構(gòu) css如下
實(shí)現(xiàn)方案:
1. songList滾動(dòng)的時(shí)候派發(fā)一個(gè)滾動(dòng)事件,父組件scroll接受到這個(gè)事件獲取偏移量pos.y
2. watch scrollY的變化,當(dāng)它變化時(shí),讓layer層向上偏移
但是這樣做有一個(gè)bug,因?yàn)榭梢詮腸ss中看出,layer層是有高度的,且高度等于當(dāng)前窗口高度,如果你一直向上滑動(dòng),則會(huì)讓layer滑出上部分,所以要對layer最高能滑到多少高度進(jìn)行設(shè)置,由于向上滑動(dòng)所產(chǎn)生的scrollY為負(fù)值,要想進(jìn)行對比,將它取反(RESERVED_HEIGHT是預(yù)留高度,你想留多少就寫多少)
3. 預(yù)留高度過后,會(huì)出現(xiàn)新的bug,因?yàn)閘ayer層不會(huì)再覆蓋住上面的預(yù)留的部分了
所以,這個(gè)時(shí)候你要讓它圖片的高度減小,讓那一小部分圖片蓋過list
由于bgimg的是靠padding撐開的,所以你需要設(shè)置
padding-top:0 height:xx PX** 才能讓它的高度變小,剩下的就是一些美化啥的..就不說了
對了,還有一個(gè)!我覺得挺重要的
5:在js中,針對各個(gè)瀏覽器內(nèi)核的不同而自動(dòng)幫你補(bǔ)全前綴
通過瀏覽器的能力檢測進(jìn)行
/* 對js里面css的前綴補(bǔ)全的操作 */
let elementStyle = document.createElement('div').style
/* 創(chuàng)建一個(gè)元素,檢查這個(gè)瀏覽器都支持什么類型 */
/* 進(jìn)行能力檢測 */
/* 這個(gè)一個(gè)立即執(zhí)行函數(shù)!! */
/* 立即執(zhí)行函數(shù): 即在函數(shù)表達(dá)式后面直接加() 如同function aaa(){xxx}()這樣的函數(shù)在定義后會(huì)立即調(diào)用
* 后面()里面的參數(shù)作為函數(shù)參數(shù)使用
* 由于js中沒有私有作用域,用這種方法可以起到私有作用域的方法,防止變量被污染 */
let vender = (() => {
let transformNames = {
webkit: 'webkitTransform',
Moz: 'MozTransform',
O: 'OTransform',
ms: 'msTransform',
standard: 'transform'
}
for (let key in transformNames) {
if(elementStyle[transformNames[key]] !== undefined){
return key
}
}
return false
})()
export function prefixStyle(style) {
if (vender === false) {
return false
}
if (vender === 'standard') {
return style
}
/* 如果輸入transform 則會(huì)輸出webkitTransform ransform是substring出來的 */
return vender + style.charAt(0).toUpperCase() +style.substring(1)
}
