JS仿今日頭條手機端主頁介面

這次帶給大家JS仿今日頭條手機端首頁介面，JS仿今日頭條手機端首頁介面的注意事項有哪些，以下就是實戰案例，一起來看一下。

前言

vue也弄了一段時間了, 前段時間一直想用vue寫個移動端,加之年底也不是很忙,於是前幾天便著手開始弄了,到今天為止也算是勉強能看了

因為也是純粹的寫寫前端頁面,所以數據方面用的是mock.js,為了真實的模擬請求,可以直接在Easy Mock 自己生成API
#也可直接登陸我這項目的Easy Mock帳號密碼：

帳號: vue-toutiao
密碼： 123456

##如果你想修改接口，請copy一份在修改

如果你想後台介面也自己開發的話。可以閱讀我這篇部落格Vue + Node +

Mongodb 開發一個完整部落格流程

技術堆疊：

vue + webpack + vuex + axios

結構：

• build: webpack配置

• #config: 專案配置參數

##src
assets: 靜態資源文件，存放
• 圖片

  啥的

components: 常用元件。例如 彈跳窗 等等。 。 。
directive: 常用指令封裝
router:路由表

• ##store: 狀態管理 vuex

• styles: 樣式檔案

• utils: 常用工具類別封裝

• views: 檢視頁面

• static: 靜態檔案： 存放favicon.ico 等等

• 此項目用到了DllPlugin 進行打包處理，所有啟動該專案時記得，先執行一次該腳本指令產生配置

• 效果示範：

幾個常用的知識點

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中文網其它相關文章！

推薦閱讀：

實現五級地區點擊後載入

vue建立一個自動建站專案

在Vue.JS中怎麼使用echarts

#

以上是JS仿今日頭條手機端主頁介面的詳細內容。更多資訊請關注PHP中文網其他相關文章！