vue專案總結

@import "~common/scss/mixin";
@import "~common/scss/variable";

if (this.loop) {
width += 2 * sliderWidth
}

this.currentPageIndex = this.scroll.getCurrentPage().pageX

window.addEventListener('resize', () => {
if (!this.scroll || !this.scroll.enabled) return

clearTimeout(this.resizeTimer)
this.resizeTimer = setTimeout(() => {
if (this.scroll.isInTransition) {
this._onScrollEnd()
} else {
if (this.autoPlay) {
this._play()
}
}
this.refresh()
}, 60)
})

activated() {
this.scroll.enable()
let pageIndex = this.scroll.getCurrentPage().pageX
this.scroll.goToPage(pageIndex, 0, 0)
this.currentPageIndex = pageIndex
if (this.autoPlay) {
this._play()
}
},
deactivated() {
this.scroll.disable()
clearTimeout(this.timer)
}

beforeDestroy() {
this.scroll.disable()
clearTimeout(this.timer)
}

before(app) {
app.get('/api/getDiscList', function (req, res) {
const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
res.json(response.data) // axios 返回的資料在 response.data，要把資料透傳到我們自定義的接口裡面 res.json(response.data)
}).catch((e) => {
console.log(e)
})
});
}

<img @load="loadImage" class="needsclick" :src="item.picUrl">

loadImage() {
if (!this.checkloaded) {
this.checkloaded = true
this.$refs.scroll.refresh()
}
}

let map = {
hot: {
title: HOT_NAME,
item: []
}
}

list.forEach((item, index) => {
if (index < HOT_SINGER_LEN) {
map.hot.item.push(new SingerFormat({
id: item.Fsinger_mid,
name: item.Fsinger_name,
}))
}
const key = item.Findex
if (!map[key]) {
map[key] = {
title: key,
items: []
}
}
map[key].items.push(new SingerFormat({
id: item.Fsinger_mid,
name: item.Fsinger_name
}))
})

let hot = []
let ret = []
let un = []
for (let key in map) {
let val = map[key]
if (val.title.match(/[a-zA-z]/)) {
ret.push(val)
} else if (val.title === HOT_NAME) {
hot.push(val)
} else {
un.push(val)
}
}
ret.sort((a, b) => {
return a.title.charCodeAt(0) - b.title.charCodeAt(0)
})
return hot.concat(ret, un)

onShortcutTouchStart(e) {
let anchorIndex = getData(e.target, 'index')// 獲取 點選具體錨點的 index 值
let firstTouch = e.touches[0]// 第一次觸碰的位置
this.touch.y1 = firstTouch.pageY// 儲存 第一次觸碰的位置的Y值
this.touch.anchorIndex = anchorIndex// 儲存 第一次觸碰時的錨點 index 值
this._scrollTo(anchorIndex)
},
onShortcutTouchMove(e) {
let firstTouch = e.touches[0]
this.touch.y2 = firstTouch.pageY
let delta = (this.touch.y2 - this.touch.y1) / ANCHOR_HEIGHT | 0 // 兩次觸碰 Y 軸的偏移錨點值
let anchorIndex = +this.touch.anchorIndex + delta// 獲取 偏移了多少 index 值，因為 anchorIndex 是字串，所以要轉成數字再相加
this._scrollTo(anchorIndex)
},
_scrollTo(index) {
this.$refs.listview.scrollToElement(this.$refs.listGroup[index], 200)
}

<Scroll class="listview" ref="listview">
<!--歌手列表-->
<ul>
<li v-for="group in data" class="list-group" ref="listGroup">
<h2 class="list-group-title">{{group.title}}</h2>
<!--首字母條目-->
<ul>
<li v-for="item in group.items" class="list-group-item">
<img :src="item.avatar" class="avatar">
<span class="name">{{item.name}}</span>
</li>
</ul>
</li>
</ul>
<div class="list-shortcut" @touchstart="onShortcutTouchStart" @touchmove.stop.prevent="onShortcutTouchMove">
<ul>
<li v-for="(item, index) in shortcutlist" :data-index="index" class="item">
{{item}}
</li>
</ul>
</div>
</Scroll>

scroll(pos) {
this.scrollY = pos.y// 實時獲取 BScroll 滾動的 Y軸距離
}

watch: {
data() {
// 延時，確保DOM渲染之後執行，通常是nextTick，這裡用setTimeout是為了相容更低
setTimeout(() => {
this._calculateHeight()
}, 20)
},

// 這裡的 scrollY 是當前元件上的，和 BScroll 的並不是一個
scrollY(newY) {
const listHeight = this.listHeight
// 1. 當滾動至頂部以上
if (newY > 0) {
this.currentIndex = 0
return
}
// 2. 當在中間部分滾動，length之所以 -1 是因為 當初高度列表定義必須多一個
for (let i = 0; i < listHeight.length - 1; i++) {
let height1 = listHeight[i]
let height2 = listHeight[i + 1]
if (-newY >= height1 && -newY < height2) {
this.currentIndex = i
this.diff = height2 + newY// height 上限 - newY 的值
return
}
}
// 3. 當滾動至底部，且 newY 大於最後一個元素的上限
this.currentIndex = listHeight.length - 2
}
}

_calculateHeight() {
this.listHeight = []
const list = this.$refs.listGroup
let height = 0
this.listHeight.push(height)
for (let i = 0; i < list.length; i++) {
let item = list[i]
height += item.clientHeight
this.listHeight.push(height)
}
}

this.diff = height2 + newY// 就是 height 上限 - newY 的值

diff(newVal) {
let fixedTop = (newVal > 0 && newVal < TITLE_HEIGHT) ? newVal - TITLE_HEIGHT : 0
if (this.fixedTop === fixedTop) return// 判斷如果兩個title區塊沒有碰到，是不會觸發 DOM 操作的
this.fixedTop = fixedTop
this.$refs.fixed.style.transform = `translate3d(0,${fixedTop}px,0)`
}

{
path: '/singer',
component: Singer,
children: [
{
path: ':id', // 表示 id 為變數
component: SingerDetail
}
]
}

<router-view></router-view>

selectSinger(singer){
this.$router.push({
path: `/singer/${singer.id}`
})
}

selectItem(item) {
this.$emit('select', item)
},

selectSinger(singer) {
this.$router.push({
path: `/singer/${singer.id}`
})
this.setSinger(singer)
},

...mapMutations({ // 語法糖，'...'將多個物件注入當前物件
setSinger: 'SET_SINGER' // 將 this.setSinger() 對映為 this.$store.commit('SET_SINGER')
})

[types.SET_SINGER](state, singer) {
state.singer = singer
}

computed: {
...mapGetters([
'singer'
])
}

singer = state => state.singer

mounted() {
this.imageHeight = this.$refs.bgImage.clientHeight
this.$refs.list.$el.style.top = `${this.imageHeight}px` // 對於 Vue 元件，this.$refs.xxx 拿到的是 Vue 例項，所以需要再通過 $el 拿到真實的 dom
this.minTransalteY = -this.imageHeight + RESERVED_HEIGHT
},

watch: {
scrollY(newY) {
let translateY = Math.max(this.minTransalteY, newY)// 最遠滾動改變的距離就是 minTransalteY
let zIndex = 0
let scale = 1
const percent = Math.abs(newY / this.imageHeight)

this.$refs.layer.style.transform = `translate3d(0,${translateY}px,0)`
this.$refs.layer.style.webkitTransform = `translate3d(0,${translateY}px,0)`
if (newY < this.minTransalteY) {
zIndex = 10
this.$refs.bgImage.style.paddingTop = 0
this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`
} else {
this.$refs.bgImage.style.paddingTop = '70%'
this.$refs.bgImage.style.height = 0
}
if (newY > 0) {
scale = 1 + percent
zIndex = 10
}
this.$refs.bgImage.style.zIndex = zIndex
this.$refs.bgImage.style.transform = `scale(${scale})`
this.$refs.bgImage.style.webkitTransform = `scale(${scale})`
}
}

let elementStyle = document.createElement('div').style

let vendor = (() => {
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 (vendor === false) return false

if (vendor === 'standard') return style

return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}

/**
 * 計算內層Image的transform，並同步到外層容器
 * @param wrapper
 * @param inner
 */
syncWrapperTransform(wrapper, inner) {
if (!this.$refs[wrapper]) return

let imageCdWrapper = this.$refs[wrapper]
let image = this.$refs[inner]
let wTransform = getComputedStyle(imageCdWrapper)[transform]
let iTransform = getComputedStyle(image)[transform]
imageCdWrapper.style[transform] = wTransform === 'none' ? iTransform : iTransform.concat(' ', wTransform)
}

progressClick(e) {
this._offset(e.offsetX - progressBtnWidth / 2)
this._triggerPercent()
}

<div class="progress-circle">
<svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"/>
<circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent":stroke-dasharray="dashArray"
:stroke-dashoffset="dashOffset"/>
</svg>
<slot></slot>
</div>

axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
let ret = response.data
if (typeof ret === 'string') {
const reg = /^\w+\(({.+})\)$/
const matches = ret.match(reg)
if (matches) {
ret = JSON.parse(matches[1])
}
}
res.json(ret)
})

this.lyric = Base64.decode(res.lyric)

getLyric() {
this.currentSong.getLyric()
.then(lyric => {
this.currentLyric = new Lyric(lyric)
})
}

this.currentLyric = new Lyric(lyric, this.handleLyric)

let middleLine = isIphoneX() ? 7 : 5// 鑑於iphonex太長了，做個小優化
if (lineNum > middleLine) {
let lineEl = this.$refs.lyricLine[lineNum - middleLine]
this.$refs.lyricList.scrollToElement(lineEl, 1000)
} else {
this.$refs.lyricList.scrollTo(0, 0, 1000)
}

middleTouchStart(e) {
this.touch.initiated = true
this.touch.startX = e.touches[0].pageX
this.touch.startY = e.touches[0].pageY
},
middleTouchMove(e) {
if (!this.touch.initiated) return
const deltaX = e.touches[0].pageX - this.touch.startX
const deltaY = e.touches[0].pageY - this.touch.startY
if (Math.abs(deltaY) > Math.abs(deltaX)) {
return
}
const left = this.currentShow === 'cd' ? 0 : -window.innerWidth
const offsetWidth = Math.min(0, Math.max(-window.innerWidth, left + deltaX))
this.touch.percent = Math.abs(offsetWidth / window.innerWidth)
console.log(this.touch.percent)
this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px,0,0)`
this.$refs.lyricList.$el.style[transitionDuration] = 0
this.$refs.middleL.style.opacity = 1 - this.touch.percent
this.$refs.middleL.style[transitionDuration] = 0
},
middleTouchEnd() {
let offsetWidth, opacity
// 從右向左滑 的情況
if (this.currentShow === 'cd') {
if (this.touch.percent > 0.1) {
offsetWidth = -window.innerWidth
opacity = 0
this.currentShow = 'lyric'
} else {
offsetWidth = 0
opacity = 1
}
} else {
//從左向右滑 的情況
if (this.touch.percent < 0.9) {
offsetWidth = 0
opacity = 1
this.currentShow = 'cd'
} else {
offsetWidth = -window.innerWidth
opacity = 0
}
}
const durationTime = 300
this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px,0,0)`
this.$refs.lyricList.$el.style[transitionDuration] = `${durationTime}ms`
this.$refs.middleL.style.opacity = opacity
this.$refs.middleL.style[transitionDuration] = `${durationTime}ms`
}

// Vue 非同步載入路由
// 引入5個 一級路由元件
const Recommend = () => import('components/recommend/recommend')
const Singer = () => import('components/singer/singer')
const Rank = () => import('components/rank/rank')
const Search = () => import('components/search/search')
const UserCenter = () => import('components/user-center/user-center')
// 二級路由元件
const SingerDetail = () => import('components/singer-detail/singer-detail')
const Disc = () => import('components/disc/disc')
const TopList = () => import('components/top-list/top-list')