資訊專欄INFORMATION COLUMN
摘要：導(dǎo)語最近看到不少使用制作的音樂播放器，挺好玩的，本來工作中也經(jīng)常使用，一起交流學(xué)習(xí)，好的話點(diǎn)個(gè)哦本項(xiàng)目特點(diǎn)如下原生封裝自己的跨域請求函數(shù)，支持調(diào)用，支持錯(cuò)誤處理制作一些復(fù)用性強(qiáng)的組件，如輪播圖組件，支持手勢滑動(dòng)，無限循環(huán)，圖片按需加載
導(dǎo)語
項(xiàng)目倉庫地址 項(xiàng)目演示地址 從項(xiàng)目中提取的banner組件地址 一、規(guī)劃目錄本項(xiàng)目特點(diǎn)如下 ：
1. 原生js封裝自己的跨域請求函數(shù)，支持promise調(diào)用，支持錯(cuò)誤處理 2. 制作一些復(fù)用性強(qiáng)的vue組件，如輪播圖組件，支持手勢滑動(dòng)，無限循環(huán)，圖片按需加載 3. 清晰明了的項(xiàng)目目錄
一個(gè)易于維護(hù)和迭代的項(xiàng)目，應(yīng)該是具有可靠的項(xiàng)目目錄的，這里，在vue-cli生成的目錄中，加入了services、directives、utils、store等目錄，并在webpack中修改相應(yīng)的導(dǎo)入地址：
1. services 用于全局管理接口和http請求
2. directives 用于添加全局指令
3. utils 用于放置通用js函數(shù)
4. store 用于管理vuex數(shù)據(jù)等
二、制作公共css，
主要采用scss+em單位+currentColor繼承父級(jí)顏色+before&after偽類制作
本項(xiàng)目制作的公共css有:
1. 播放器要用到的圖標(biāo)
2. 用于vue transition標(biāo)簽切換時(shí)使用的css3動(dòng)畫
3. css reset
4. 項(xiàng)目主題顏色，目前只能在項(xiàng)目初始化之前設(shè)置主題顏色,用于管理，所有組件主題顏色都來源于此
三、全局API
分成兩個(gè)部分：
1. jsonp分裝，負(fù)責(zé)http請求 2. 收集url地址，并放在API類上，并循環(huán)將url用bind函數(shù)導(dǎo)入到j(luò)sonp封裝函數(shù)中，其他請求同樣可用四、核心組件
包括 :
1. banner組件 2. 播放器1.banner組件
該組件只對(duì)傳入的數(shù)據(jù)進(jìn)行處理，并相應(yīng)轉(zhuǎn)化，保證了組件的通用性
核心的函數(shù)主要是對(duì)***無限循環(huán)的處理、觸摸屏滑動(dòng),圖片按需加載***處理：
computed : {
sliderImg : function(){
const [...saveImg] = this.bannerlist, //拷貝圖片列表數(shù)據(jù)，在展示區(qū)域的圖片實(shí)際上首尾拷貝了一樣的圖片，即尾端拷貝第一張，首端拷貝最后一張
[imgfirst, ...other] = this.bannerlist;
saveImg.unshift(other[other.length-1])
saveImg.push(imgfirst)
return saveImg
},
},
mounted () {
if (this.bannerlist && this.bannerlist.length) {
this.interTimer = setInterval(()=>{
this.sliderStart()
},3000)
}
},
methods : {
linkURl (item) {
window.open(item[this.linkurl])
},
getURl (item,index) { //用于減少一次性請求，只加載當(dāng)前的圖片，加載之后添加標(biāo)識(shí)
if (!item) {
return reloadImg
}
if (item.hasload) {
return item[this.picurl]
}
if (this.nowSlider == index-1) {
item.hasload = true
return item[this.picurl]
}
return reloadImg
},
stopSlider (e) {
e.preventDefault()
e.stopPropagation()
if (e.target != e.currentTarget) { //事件委托節(jié)省下事件綁定，排除當(dāng)前綁定的dom
clearInterval(this.interTimer)
delete this.sliderActive["transition"] //關(guān)閉css3過渡效果
this.startTouch = e.targetTouches[0].screenX
}
},
moveSlider (e) {
e.preventDefault()
e.stopPropagation()
if (this.nowSlider === -1||this.nowSlider === this.bannerlist.length) { //首端與尾端未連接好禁止滑動(dòng)
return;
}
if (e.target != e.currentTarget) {
this.moveTouch = e.targetTouches[0].screenX
let slideDir = this.moveTouch - this.startTouch,
targetWidth = parseInt(window.getComputedStyle(e.target).width),
tranDir;
if (slideDir < -50 || slideDir > 50) { //加了50容錯(cuò)值，能預(yù)防觸摸時(shí)圖片突然閃動(dòng)
if (slideDir < 0) { //再重新補(bǔ)回差值
slideDir -= 50
} else {
slideDir += 50
}
tranDir = -targetWidth * (this.nowSlider+1) + slideDir//觸摸時(shí)圖片隨手指移動(dòng)，距離須減去當(dāng)前圖片寬度乘以當(dāng)前滾動(dòng)索引
this.sliderActive.transform = `translate3d(${tranDir}px,0,0)`
}
}
},
continSilder (e) { //結(jié)束觸摸
e.preventDefault()
e.stopPropagation()
if (e.target != e.currentTarget && this.moveTouch) {
const slideDir = this.moveTouch - this.startTouch
if (slideDir < 0) {
this.nowSlider ++
} else if (slideDir > 0) {
this.nowSlider --
}
this.nowSlider --
this.sliderStart() //立即設(shè)置位置
this.moveTouch = 0 //清空手勢位置
this.startTouch = 0
this.interTimer = setInterval(()=>{
this.sliderStart()
},3000)
}
},
sliderStart () {
this.nowSlider ++
this.nowSlider %= this.sliderImg.length
if (this.nowSlider === this.bannerlist.length) { //向右滑動(dòng)到最大值時(shí)，將位置初始化并清0 nowSlider
setTimeout(() => { //設(shè)置一個(gè)定時(shí)器，用于異步處理，一個(gè)進(jìn)行尾端拷貝的圖片的正?；瑒?dòng)，這個(gè)處理在差不多到達(dá)時(shí)重置，造成無限循環(huán)的錯(cuò)覺
this.sliderActive = {
transform: `translate3d(-100vw,0,0)`
}
this.nowSlider = 0
}, 500)
}
if (this.nowSlider === -1) { //向右滑動(dòng)到最小值時(shí)，將位置置為最大值
setTimeout(() => {
this.nowSlider = this.bannerlist.length-1
this.sliderActive = {
transform: `translate3d(${-100*(this.nowSlider+1)}vw,0,0)`
}
}, 500)
}
this.sliderActive = Object.assign({},{
transition:"transform 0.5s",
transform: `translate3d(${-100*(this.nowSlider+1)}vw,0,0)`
})
}
}
2.播放器功能
播放器的所有功能主要依賴vuex（store.js）的控制，由于音樂是在整個(gè)app內(nèi)都播放的，故audio標(biāo)簽放在了App.vue中：
store.js:
APP.vue:
computed : {
audioSrc : function () { //對(duì)當(dāng)前播放的音頻切換，放在頂層
const song = this.$store.state.nowsong;
let audioTimer;
if (!song) {
this.$store.state.playing = false
clearInterval(audioTimer)
return null
}
this.$store.state.playing = true
audioTimer = setInterval(()=>{ //每秒獲取進(jìn)度
let audio = document.getElementById("m-audio");
if (audio) {
this.$store.state.audioProgss = audio.currentTime/audio.duration*100+"%"
} else {
clearInterval(audioTimer)
}
},1000)
return `${API.url.getsong}${song.songid}.m4a?fromtag=46` //播放一首歌曲
},
playing : function () {
return this.$store.state.playing
},
},
directives : {
play : { //控制是否播放
update : function(el,binding) {
if (binding.value) {
el.play()
} else {
el.pause()
}
}
}
},
整體項(xiàng)目核心功能介紹到此.有好的建議盡管提哦
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/81804.html
摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...
摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...
閱讀 2371·2021-11-22 12:01
閱讀 2093·2021-11-12 10:34
閱讀 4608·2021-09-22 15:47
閱讀 2915·2019-08-30 15:56
閱讀 2918·2019-08-30 15:53
閱讀 2466·2019-08-30 13:53
閱讀 3470·2019-08-29 15:35
閱讀 3180·2019-08-29 12:27
