原创 Vue音樂--排行榜頁面03_添加已寫公共組件

大概步驟: 目標效果 三、排行榜首頁添加公共組件 要點: “滾動”組件 “加載中”組件 “mixin”重複邏輯js 滾動組件 <!--scroll是插槽組件,可爲它添加class,寫上固定頁面的定位,傳入data用

原创 Vue音樂--排行榜頁面07_抓取詳情頁數據

大概步驟: 目標效果 七、抓取排行榜詳情頁數據 要點 進入QQ音樂移動端,查找Network中的排行榜首頁數據,在XHR中找到 使用之前寫好的jsonp解析數據的方法,傳入處理好的url 點擊事件傳入點擊的排行榜id

原创 Vue音樂--排行榜頁面01_頁面佈局

大概步驟: 目標效果 一、新建 排行榜首頁 HTML佈局 要點: 靈活使用到flew佈局 左右佈局(圖片文字) 上下佈局(文字中的li) 相關代碼 <ul> <li class="rank-item"> <

原创 Vue音樂--排行榜頁面06_詳情頁面佈局

大概步驟: 目標效果 六、新建排行榜詳情頁 HTML佈局 要點: 使用滑動動畫 引用封裝好的公共組件musiclist即可 傳入從store中的數據,進組件中 引用加載中組件 <transition name="s

原创 Vue音樂--排行榜頁面08_優化

大概步驟: 目標效果 八、優化 要點: 給排行榜歌曲列表添加排名符號 刷新的時候返回路由rank 詳情頁面頭部圖片換成第一首歌曲的圖片(排行榜圖片有字不適用) 收費歌曲,無法播放,獲取不到url,彈出彈窗 排行榜歌曲列表的數

原创 Vue音樂--排行榜頁面05_詳情頁vuex數據

大概步驟: 目標效果 五、配置排行榜詳情頁面vuex數據 要點: 在store文件夾中定義相關的state、mutations、getters、mutation-types 數據分爲: 排行榜首頁點擊存入數據mutation

原创 Vue音樂--排行榜頁面04_詳情頁面路由

大概步驟: 目標效果 四、配置排行榜詳情頁面路由 # router-->index.js 配置子路由 { path: '/rank', name: 'Rank', component: Ra

原创 Github上傳到分支併合並的使用

1、更新分支    git pull2、進入分支    git checkout xxxx3、上傳到分支    git status     git add .    git status    git commit -m "xxxxxx

原创 iconfont圖標樣式庫

準備:在iconfont網站找到圖標加入項目下載後把除了html 、js 格式的文件拉到styles文件中步驟:1、新建一個iconfont文件夾,存字體樣式2、在iconfont.css中修改引用字體樣式的路徑3、iconfont.cs

原创 CSS文本內容超出區域用省略號顯示

文本區域樣式CSS:min-width: 0;     //當省略號被隱藏時,設置文本樣式CSS:overflow: hidden; white-space: nowrap;       //文本不換行 text-overflow:

原创 一維數組變成二維數組

swipers:function(){ const swipers = [] this.list.forEach((item,index) =>{ const swiper = Math.floor(index/8); //返回

原创 js定時器

自動化的網頁總離不開定時器JS中定時器,有兩種:setTimeout( function , time ) 、setInterval( function , time )區別:    setTimeout( function , time

原创 css定義等比例縮放發區域寬高

CSS代碼:overflow : hidden ; height : 0 ; padding-bottom : xx% ;原理:區域的高度爲0此時高度由padding-bottom撐開並保持,百分比寬度百分比padding均使用父元素

原创 利用vue引入百度地圖api

涉及到:    Vue腳手架準備:    百度地圖api,專屬的密鑰(ak)    (在百度地圖api官網按指示操作即可)建議:    先按找百度地圖api開發文檔進行簡單helloworld操作(不使用到vue)腳手架的準備:vue腳手

原创 谷歌瀏覽器被2345主頁強制綁定

2345主頁這些網頁有時候真是像毒瘤一般強制綁定用戶的瀏覽器主頁,使用了瀏覽器設置和安全管家修改也沒用這幾天終於有時間上網找解決方法,網上的方法參差不齊在這裏說一下我親測有效的方法原因:    可能是下載一些盜版軟件的時候,被惡意修改了註