国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue2.0全家桶仿騰訊體育APP(Web版)

fnngj / 1496人閱讀

摘要:全家桶仿騰訊體育一年一度的總決賽,相信球迷用的最多的就是騰訊體育這款,剛好上手,當練手就把這個仿下來。這樣剛進去的時候頁面加載時間明顯減短。可以包含任意異步操作。

Vue2.0全家桶仿騰訊體育APP

一年一度的NBA總決賽,相信球迷用的最多的就是騰訊體育這款APP,剛好上手Vue,當練手就把這個APP仿下來。

效果預覽
?在線預覽:點我!!!在線預覽,手機瀏覽或切換瀏覽器移動調試

?源碼地址:Github??求你的小星星~

描述

前端部分

SPA單頁應用,前后端分離,webpack build to dist

移動設備兼容:使用flexible.js和rem處理兼容問題

路由懶加載:Vue Router 處理路由,結合 Vue 的 異步組件 和 Webpack 的 code splitting feature 實現路由懶加載

axios做ajax請求

使用了 Vuex 管理組件間的狀態(tài),實現非父子組件之間的通信

使用 Vue-draggable實現移動端拖拽排序

mint-UI完成構建圖片懶加載、下拉刷新、infinite-scroll等組件

大圖片、輪播圖通過 sessionStorage 存儲

后端部分

mock模擬數據

express 做靜態(tài)資源目錄

待更新的功能

處理數據相關性,讓圈子組件和文章組件對應顯示

改用 express 拋接口

用 express + mongodb 保存用戶狀態(tài)

具體功能實現 路由結構

使用了Vue的異步組件和Webpack的code splitting feature實現路由組件的懶加載當打包構建應用時,Javascript包會變得非常大,影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊,然后當路由被訪問的時候才加載對應組件,這樣就更加高效了。這樣剛進去的時候頁面加載時間明顯減短。

routes: [
    {
      path: "/article-video/:id",
      component: resolve => require(["@/page/article/article-video"], resolve)
    },
    {
      path: "/article/:id",
      component: resolve => require(["@/page/article/article"], resolve)
    },
    {
      path: "/",
      name: "Index",
      component: resolve => require(["@/page/index.vue"], resolve),
      redirect: "/competition/recommend",
      children: [{
        path: "/competition",
        name: "competition",
        component: resolve => require(["@/page/home/competition"], resolve),
        children: [{
          path: "/competition/recommend",
          name: "recommend",
          component: resolve => require(["@/components/tunnels/recommend"], resolve)
        }, {
          path: "/competition/video",
          name: "video",
          component: resolve => require(["@/components/tunnels/video"], resolve)
        }, {
          path: "/competition/nba",
          name: "nba",
          component: resolve => require(["@/components/tunnels/nba"], resolve),
        }]
      }, {
        path: "/community",
        name: "community",
        component: resolve => require(["@/page/home/community"], resolve),
        children: [{
          path: "/community/hotpost",
          name: "hotpost",
          component: resolve => require(["@/components/community/hotpost"], resolve)
        }, {
          path: "/community/mycircle",
          name: "mycircle",
          component: resolve => require(["@/components/community/mycircle"], resolve)
        }, {
          path: "/community/activies",
          name: "activies",
          component: resolve => require(["@/components/community/activies"], resolve)
        }, {
          path: "/community/all",
          name: "communityall",
          component: resolve => require(["@/components/community/all"], resolve)
        }, {
          path: "/community/article/:id",
          component: resolve => require(["@/page/article/article"], resolve),
          redirect: "/article/:id"
        }]
      }, {
        path: "/agenda",
        name: "agenda",
        component: resolve => require(["@/page/home/agenda"], resolve),
        children: [{
          path: "/agenda/focus",
          name: "focus",
          component: resolve => require(["@/components/agenda/focus"], resolve)
        }, {
          path: "/agenda/all",
          name: "agendaall",
          component: resolve => require(["@/components/agenda/all"], resolve)
        }, {
          path: "/agenda/popular",
          name: "popular",
          component: resolve => require(["@/components/agenda/popular"], resolve)
        }]
      }, {
        path: "/mine",
        name: "Mine",
        component: resolve => require(["@/page/home/mine"], resolve),
        redirect: "/mine/index",
        children: [{
          path: "/mine/index",
          component: resolve => require(["@/components/mine/index"], resolve)
        }]
      }]
    }
  ]
拖拽排序

眾所皆知,h5原生的drag事件對移動端是無效的,因此,移動端的拖拽實現,依賴于touchstart、touchend和scroll的坐標計算,實現起來非常麻煩,Vue-draggable可以讓我們輕松實現跟PC端效果一樣的拖拽排序。

?文檔地址:https://github.com/SortableJS...

特性Full support of Sortable.js features:

Supports touch devices
Supports drag handles and selectable text
Smart auto-scrolling
Support drag and drop between different lists
No jQuery dependency
Keeps in sync HTML and view model list
Compatible with Vue.js 2.0 transition-group
Cancellation support
Events reporting any changes when full control is needed

安裝依賴

npm install vuedraggable --save

構造拖拽區(qū)域


    
    
Vuex的使用

需要注意:Action 類似于 mutation,不同在于:

Action 提交的是 mutation,而不是直接變更狀態(tài)。

Action 可以包含任意異步操作。

用到的地方

頻道訂閱的狀態(tài)改變對應路由的變化

圈子訂閱的狀態(tài)改變對應訂閱列表的雙向顯示

mutation-types
// 未定制增加
export const ADD_NOSUBSCRIBED = "ADD_NOSUBSCRIBED"
// 未定制減少
export const DELETE_NOSUBSCRIBED = "DELETE_NOSUBSCRIBED"
// 定制增加
export const ADD_SUBSCRIBED = "ADD_SUBSCRIBED"
// 定制減少
export const DELETE_SUBSCRIBED = "DELETE_SUBSCRIBED"
// 更新頁面和數據
export const UPDATE_ALL = "UPDATE_ALL"
// 社團增加
export const ADD_CLUB = "ADD_CLUB"
// 社團減少
export const DELETE_CLUB = "DELETE_CLUB"
mutations
import * as types from "./mutation_types"

export default {
  // 添加社團
  [types.ADD_CLUB] (state, obj) {
    if(!state.clubs.includes(obj)) state.clubs.push(obj)
    return
  },
  // 刪除社團
  [types.DELETE_CLUB] (state, obj) {
    let oIndex = state.clubs.findIndex((item) => {
      return item.name == obj.name
    })
    state.clubs.splice(oIndex, 1)
  },
  // 添加未訂閱
  [types.ADD_NOSUBSCRIBED] (state, index) {
    console.log(index)
  },
  // 刪除未訂閱
  [types.DELETE_NOSUBSCRIBED] (state, index) {
    console.log(index)
  },
  // 添加訂閱
  [types.ADD_SUBSCRIBED] (state, index) {
    console.log(index)
    let temp = state.noSubscribed[index]
    state.noSubscribed.splice(index, 1)
    state.subscribed.push(temp)
    state.routes[0].push(temp)
  },
   // 刪除訂閱
  [types.DELETE_SUBSCRIBED] (state, index) {
    // console.log(index)
    let oIndex = parseInt(index) + 2
    let temp = state.subscribed[index]
    state.subscribed.splice(index, 1)
    state.routes[0].splice(oIndex, 1)
    // console.log(state.noSubscribed)
    state.noSubscribed.push(temp)
  },
  // 用數據塊更新
  [types.UPDATE_ALL] (state, obj) {
    // console.log(obj)
    // console.log(obj.temp_NoSubscribedArr)
    // console.log(obj.temp_subscribedArr)
    state.subscribed = obj.temp_subscribedArr
    state.noSubscribed = obj.temp_NoSubscribedArr
    // console.log(state.subscribed)
    // console.log(state.noSubscribed)
    state.routes[0] = [{
      name: "推薦",
      url: "/competition/recommend"
    }, {
      name: "視頻",
      url: "/competition/video"
    }]
    // console.log(state.subscribed)
    state.subscribed.map(item => {
      // console.log(item)
      // console.log(state.routes[0])
      state.routes[0].push(item)
    })
    // console.log(state.routes[0])
  }
}
actions
import * as types from "./mutation_types"
export default {
  // 未定制增加
  add_nosubscribed: ({ commit }, index) => {
    commit(types.ADD_NOSUBSCRIBED, index)
  },
  // 未定制減少
  delete_nosubscribed: ({ commit }, index) => {
    commit(types.DELETE_NOSUBSCRIBED, index)
  },
  // 定制增加
  add_subscribed: ({ commit }, index) => {
    commit(types.ADD_SUBSCRIBED, index)
  },
  // 定制減少
  delete_subscribed: ({ commit }, index) => {
    commit(types.DELETE_SUBSCRIBED, index)
  },
  // 更新頁面和數據
  update_all: ({ commit }, obj) => {
    commit(types.UPDATE_ALL, obj)
  },
  // 社團增加
  add_club: ({ commit }, obj) => {
    commit(types.ADD_CLUB, obj)
  },
  // 社團減少
  delete_club: ({ commit }, obj) => {
    commit(types.DELETE_CLUB, obj)
  },
}
做個小廣告 ? 小前端求實習:我的簡歷

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83366.html

相關文章

  • Vue2.0全家桶仿騰訊課堂(移動端)

    摘要:最近在學習覺得超好用,忍不住自己仿了個騰訊課堂練練手,不當之處還請大家指正持續(xù)更新中。的使用的狀態(tài)存儲是響應式的。需要注意類似于,不同在于提交的是,而不是直接變更狀態(tài)。 最近在學習vue,覺得超好用,忍不住自己仿了個騰訊課堂練練手,不當之處還請大家指正(持續(xù)更新中)。 效果預覽 ?在線預覽:點我!!!在線預覽,手機瀏覽或切換瀏覽器移動調試 ?源碼地址:Github??求你的小星星~...

    zorro 評論0 收藏0
  • Vue2.0全家桶仿騰訊課堂(移動端)

    摘要:最近在學習覺得超好用,忍不住自己仿了個騰訊課堂練練手,不當之處還請大家指正持續(xù)更新中。的使用的狀態(tài)存儲是響應式的。需要注意類似于,不同在于提交的是,而不是直接變更狀態(tài)。 最近在學習vue,覺得超好用,忍不住自己仿了個騰訊課堂練練手,不當之處還請大家指正(持續(xù)更新中)。 效果預覽 ?在線預覽:點我!!!在線預覽,手機瀏覽或切換瀏覽器移動調試 ?源碼地址:Github??求你的小星星~...

    anquan 評論0 收藏0
  • Vue2 全家桶仿 微信App 項目,支持多人在線聊天和機器人聊天

    摘要:前言這個項目是利用工作之余寫的一個模仿微信的單頁面應用,整個項目包含個頁面,涉及實時群聊,機器人聊天,同學錄,朋友圈等等,后續(xù)頁面還是開發(fā)中。 前言 這個項目是利用工作之余寫的一個模仿微信app的單頁面應用,整個項目包含27個頁面,涉及實時群聊,機器人聊天,同學錄,朋友圈等等,后續(xù)頁面還是開發(fā)中。寫這個項目主要目的是練習和熟悉vue和vuex的配合使用,利用socket.io實現實時聊...

    iliyaku 評論0 收藏0
  • React-全家桶仿簡書部分功能

    摘要:全家桶仿簡書部分功能前言前段時間接觸了下,一直想要自己寫一個小練手。在眾多應用中,考慮之后選擇了簡書來模仿,這段時間就利用了工作之余的時間進行開發(fā)。在這里簡單敘述一下我仿簡書部分布局以及功能實現的過程,僅做學習用途。 React-全家桶仿簡書部分功能 前言 前段時間接觸了下React,一直想要自己寫一個小Demo練手。在眾多應用中,考慮之后選擇了簡書來模仿,這段時間就利用了工作之余的時...

    Jinkey 評論0 收藏0
  • 2017-06-20 前端日報

    摘要:前端日報精選專題之跟著學節(jié)流冴羽的博客全家桶仿微信項目,支持多人在線聊天和機器人聊天騰訊前端團隊社區(qū)編碼的奧秘模塊實現入門淺析知乎專欄前端每周清單發(fā)布新版本提升應用性能的方法中文寇可往吾亦可往用實現對決支付寶的微信企業(yè)付款到零 2017-06-20 前端日報 精選 JavaScript專題之跟著 underscore 學節(jié)流 - 冴羽的JavaScript博客 - SegmentFau...

    Galence 評論0 收藏0

發(fā)表評論

0條評論

fnngj

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<