墨瞳漫畫h5一期 vuejs總結

博主也是vuejs萌新，公司僅我乙個前端，收到做h5的需求後，馬上想到要用下vuejs，於是說服領導，開始慢慢鑽研，現在記錄一下踩到的坑。這些坑主要是在一些元件的使用上，其它的只要好好看官方文件就好了，vue，vue-router, vuex的文件相當重要。

歡迎體驗提bug 墨瞳漫畫 m.cm233.com

然後開啟html5 history模式，並開啟位置紀錄

const router = new router()

開啟keep-alive以後，當要求乙個元件的內容發生變化時，比如漫畫詳情頁面是乙個路由帶引數的元件，當引數變化時，router會重用這個元件，而不是重新請求資料，這顯然是不符合要求的，所以正確的姿勢是：

首先，用乙個字段儲存這個路由引數，

用router的鉤子函式data獲取路由變化引數，儲存到字段裡

route:
}

寫乙個watcher來拉取資料並填充模版，因為在data鉤子函式中，我們已經修改了相應字段，所以當路由引數更改時會直接觸發這個watcher

watch: 
}

如果是多個引數的，可以把這些引數放到乙個物件裡，watcher採用深監測

route:
},watch : ,
deep: true
}}

一開始沒有用這種方法出了很多的bug，改了以後，路由和快取方面的邏輯瞬間就變得清晰了，元件的切換也更加流暢了。

第二個坑就是關於快取頁面瀏覽位置的紀錄，router是通過html5 history的pushstate來紀錄當前滾動位置的，切換路由的時候，把當前位置push進去，使用者後退時，會觸發onpopstate事件，這個時候再把位置取出來並滾動到指定位置，但是！某些瀏覽器本身也設定了一些奇怪的位置滾動，vue-router的滾動就失效了，所以需要延遲執行一下

window.addeventlistener("popstate",function(e),300)
},false);

然而，瀏覽器只能記錄乙個位置，所以會有這樣的情況: 從m.cm233.com 到 m.cm233.com/book,再返回到m.cm233.com，這時瀏覽器跳到了當時記錄的位置，但是再前進到/book時，瀏覽器還是會停在首頁的那個位置上，這個bug暫時還沒有解決，好在使用者場景不是很多。所以告訴我們，子頁面路由引數變化的時候，要把滾動條人工弄到最上面，要不然就會滾動到入口頁面的瀏覽位置。也就是watcher裡還要加一句如上的滾動。

頁面標題也是要手動更改的，所以每個頁面要放乙個專門的title變數存一下，然後在data鉤子函式(用於元件快取時) 和路由引數的watcher(用於元件更新時) 裡都改變title

route:
},watch : 
}

通常頁面的標題不是固定的，用變數儲存title，主要是為了記住上一次元件被用的時候的title，以便於重用的時候更換。

//全域性函式
window.isweixin = function()else
}window.weixinchange = function(title), 0);}}}
//元件中
route:
},watch : 
}

（為什麼不自己寫！）

元件位址餓了麼出品

使用方法

main.js

import scroll from 'vue-infinite-scroll'
vue.use(scroll)

元件中

loadmore())
}

但是這個元件在路由切換的時候會出問題，routerview被移除時，元件會觸發載入（大概是因為頁面高度突然塌陷），而且會一直載入到我們自己設定的停止條件（busy＝true）。所以離開頁面的時候，需要在路由的deactivate鉤子函式裡把滾動關掉，再次進入頁面的時候再開啟（路由無變化在data鉤子函式裡開啟，有變化的話在watcher裡開啟，如果不需要在路由改變時向子元件延時傳遞引數也可以都在data鉤子函式裡開啟）

route:,
data: function(transition)//這裡輸入元件路由引數沒有變化的條件
}}

（為什麼不自己寫！）

網上找了幾個lazyload的元件，都不太好使，就自己改了乙個，是改了乙個，原元件叫vue-lazyload, 毛病還挺多的，寫這個元件的人估計沒有真正在大專案中用過就匆匆發布在npm了，es6版本也寫的不倫不類的－－，不過還是很厲害，自己寫的話毛病肯定會更多。我改後的放在了，是個較為穩定的版本。其中過渡動畫寫在img-loaded這個class裡

/*簡單的透明度漸入，載入完成後會刪掉這個class，以防router切換快取頁面時再次引起動畫*/ .img-loaded @keyframes loaded 100%

}

let loadingjpg = require('assets/loading.jpg');//這裡引入一張loading圖，會被轉成base64
vue.use(vuelazyload, )

自適應的：如果服務端傳過來的帶了寬高資訊，可以在img外層包乙個class為img-bar的元素，過來的時候先設定乙個min-height為響應高，元件在載入後會自動取掉這個min-height。這樣可以防止loading圖和大小不一樣引起的頁面跳動繼而導致的載入時機錯誤。

跨域時，會先傳送乙個空的options請求來檢視介面是不是支援跨域，再傳送一次真實請求。還不是很了解這種方式的好處，當介面較多時，請求數量多了一倍也是有點尷尬的，所以要設定一下。而且如果介面每次都列印空引數的log的話。。。嗯。

vue.http.options.headers=;vue-cli直接構建的，src裡的目錄如下

output: 
new extracttextplugin(utils.assetspath('css/[name].css?t=[contenthash]')),

墨瞳漫畫h5一期 vuejs總結

h5 一鏡到底從零到一實現通用一鏡到底 H5

H5前端開發筆記（一）

學習H5一周隨筆

墨瞳漫畫h5一期 vuejs總結

h5 一鏡到底 從零到一 實現通用一鏡到底 H5

H5前端開發筆記（一）

學習H5一周隨筆

相關推薦

h5 一鏡到底從零到一實現通用一鏡到底 H5