這次帶給大家JS仿今日頭條手機端首頁介面，JS仿今日頭條手機端首頁介面的注意事項有哪些，以下就是實戰案例，一起來看一下。
前言
vue也弄了一段時間了, 前段時間一直想用vue寫個移動端,加之年底也不是很忙,於是前幾天便著手開始弄了,到今天為止也算是勉強能看了
因為也是純粹的寫寫前端頁面,所以數據方面用的是mock.js,為了真實的模擬請求,可以直接在Easy Mock 自己生成API
#也可直接登陸我這項目的Easy Mock帳號密碼：
##如果你想修改接口，請copy一份在修改如果你想後台介面也自己開發的話。可以閱讀我這篇部落格Vue + Node +帳號: vue-toutiao
密碼： 123456
Mongodb 開發一個完整部落格流程
技術堆疊：vue + webpack + vuex + axios結構：
幾個常用的知識點
1.路由懶載入
。 #
{
path: '/development',
name: 'development',
component: (resolve) => {
require(['../views/development.vue'], resolve)
}
}const _import_ = file => () => import('views/' + file + '.vue')
{
path: '/development',
name: 'development',
component: _import_('development')
}2. 登陸攔截
#透過路由的beforeEach 鉤子函數來判斷是否需要登陸
// 如：系统设置需要登陆
{
path: '/system',
name: '系统设置',
meta: {
login: true
},
component: _import_('System/index')
}
router.beforeEach((to, from, next) => {
if (to.meta.login) { //判断前往的界面是否需要登陆
if (store.state.user.user.name) { // 是否已经登陆
next()
}else{
Vue.prototype.$alert('请先登录!')
.then( () => {
store.state.user.isLogin = true
})
}
}else{
if (to.meta.page) store.state.app.pageLoading = true
next()
}
})3. 動畫切換
透過偵測設定在Router上的animate屬性來判斷它做什麼樣的切換動畫
Router.prototype.animate = 0
// 获取每个路由meta上面的slide 来判断它做什么动画
{
path: '/system',
name: '系统设置',
meta: {
slide: 1
},
component: _import_('System/index')
}
watch: {
$route (to, from) {
/*
0: 不做动画
1: 左切换
2: 右切换
3: 上切换
4: 下切换
...
*/
let animate = this.$router.animate || to.meta.slide
if (!animate) {
this.animate = ''
}else{
this.animate = animate === 1 ? 'slide-left' :
animate === 2 ? 'slide-right' :
animate === 3 ? 'slide-top' :
animate === 4 ? 'slide-bottom' : ''
}
this.$router.animate = 0
}
}4. 影片播放
#因為在IOS上無法隱藏video的controls ,所以我們可以隱藏video,透過繪製canvas來達到播放影片的效果
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ 推薦閱讀：實現五級地區點擊後載入
以上是JS仿今日頭條手機端主頁介面的詳細內容。更多資訊請關注PHP中文網其他相關文章！
