亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vuejs仿網(wǎng)易云音樂實(shí)現(xiàn)聽歌及搜索功能

 更新時(shí)間：2017年03月30日 14:14:39   作者：秋風(fēng)飄過  
這篇文章主要介紹了Vuejs仿網(wǎng)易云音樂實(shí)現(xiàn)聽歌及搜索功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

前言

前端時(shí)間學(xué)了vue，一開始看了vue1.0，后來實(shí)在覺得技術(shù)總得實(shí)踐，就直接上手vue2.0。然后花了將近一周時(shí)間做了一個(gè)網(wǎng)易云音樂的小項(xiàng)目。一開始覺得項(xiàng)目比較小，沒必要用vuex所以就沒有使用，但是后來發(fā)現(xiàn)數(shù)據(jù)流傳輸有點(diǎn)麻煩，后續(xù)會(huì)使用vuex。

技術(shù)棧

vue+vue-router（核心框架）
better-scroll（使移動(dòng)端滑動(dòng)體驗(yàn)更加流暢）
vue-lazyload（用戶圖片懶加載）
nprogress（用于加載過渡）
 axios（請(qǐng)求）

功能分析與設(shè)計(jì)

首先我先參考了現(xiàn)有的一些APP的設(shè)計(jì)與開發(fā)，然后決定做了歌單和搜索兩個(gè)模塊，本身主要以前端為主，后端代碼并沒有研究，這里要感謝這位同學(xué)寫的API。如果你沒有API也沒有關(guān)系，這并不影響我們的開發(fā)，你可以寫如下形式的json數(shù)據(jù)進(jìn)行模擬：

vuejs

路由結(jié)構(gòu)如下

以下是組件

1.歌單部分：

數(shù)據(jù)主要由API提供，源碼中有具體地址。需要了解audio標(biāo)簽，不熟悉的同學(xué)看audio

2.搜索部分：

通過綁定@keydown來綁定事件，實(shí)現(xiàn)實(shí)時(shí)查詢。

better-scroll

使用：

1.一定要用一個(gè)空層來承載

<div ref="helloWrapper">
  <div>
  //你的代碼
  </div>
</div>

2.在vue中使用前必須引入

import BScroll from 'better-scroll';
this.helloScroll = new BScroll(this.$refs.helloWrapper, {
 click: true
});

一定要在數(shù)據(jù)渲染完成后使用better-scroll，

this.$nextTick(() => {
 //調(diào)用
});

最后上幾張效果圖

 github項(xiàng)目地址：https://github.com/hua1995116/musiccloudWebapp/

在線演示地址：http://qiufengh.com:8080/

以上所述是小編給大家介紹的Vuejs仿網(wǎng)易云音樂實(shí)現(xiàn)聽歌及搜索功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論