成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue2.0仿今日頭條

pepperwang / 1420人閱讀

摘要：基于仿照今日頭條的移動(dòng)端項(xiàng)目源碼地址預(yù)覽地址前言先占個(gè)坑位。項(xiàng)目中還有許多可以完善的地方，不足之處希望小伙伴們可以，我會(huì)在這里更新。目前還沒(méi)有全面地測(cè)試該項(xiàng)目，有問(wèn)題提問(wèn)，大家一起學(xué)習(xí)。

toutiao 
基于Vue2.0仿照今日頭條的移動(dòng)端項(xiàng)目

源碼地址：toutiao_Vue2.0

預(yù)覽地址：toutiao_Vue2.0

前言

先占個(gè)坑位。

之前打算做個(gè)東西熟悉vue的使用，由于自己蠻喜歡刷手機(jī)看看新聞的，借鑒了其他同學(xué)的項(xiàng)目（鏈接在下面），自己也做了一個(gè)。項(xiàng)目中還有許多可以完善的地方，不足之處希望小伙伴們可以issue，我會(huì)在這里更新。目前還沒(méi)有全面地測(cè)試該項(xiàng)目，有問(wèn)題提問(wèn)，大家一起學(xué)習(xí)。

技術(shù)棧

主要用到：vue、vuex、vue-router

移動(dòng)端布局：flexble.js

其他: jsonp、axios、iView、vue-lazyload、moment

功能

各類新聞的查看

本地收藏新聞

新聞的搜索

待...

效果

移動(dòng)端可以直接掃描，或者在chrome的device toolbard打開(kāi)傳送門

目錄 
|- src
   |- assets
      |- image  // 項(xiàng)目圖片
      |- style
         |- common.scss  // 移動(dòng)端的單位的轉(zhuǎn)換
         |- global.scss  // 全局樣式
         |- newsList.scss  // 新聞列表的樣式
         |- transition.scss  // 過(guò)渡樣式
   |- components  // 組件
      |- Back.vue  // 返回
      |- Comment.vue  // 評(píng)論
      |- Footer.vue  // 頁(yè)腳
      |- HomeNav.vue  // 新聞?lì)愋蛯?dǎo)航
      |- Loading.vue  // 加載
      |- Loadingmore.vue  // 加載更多
      |- Nav.vue  // 導(dǎo)航
      |- Newslist.vue  // 新聞列表
      |- Top.vue  // 返回頂部
      |- Warning.vue  // 出錯(cuò)提醒
   |- pages  // 主體頁(yè)面
      |- About.vue // 信息頁(yè)
      |- Collect.vue  // 收藏頁(yè)
      |- Content.vue  // 文章頁(yè)
      |- Home.vue  // 主頁(yè)
      |- Search.vue  // 收藏頁(yè)
      |- Session.vue  // 段子頁(yè)
   |- router  // 路由
   |- store  // 狀態(tài)管理
   |- App.vue
   |- main.js  // 入口文件
|- static
   |- collect.json  // 初始收藏
   |- imgerror.jpg  // 懶加載錯(cuò)誤圖片
   |- imgloading.jpg  // 懶加載中圖片

更多細(xì)節(jié)在源碼中會(huì)有一些注釋

API

獲取新聞：https://m.toutiao.com/list/?tag=新聞?lì)愋?ac=wap&count=20&format=json_raw&as=A125A8CEDCF8987&cp=58EC18F948F79E1&min_behot_time=時(shí)間

獲取文章：https://m.toutiao.com/i新聞ID/info/"

獲取段子：https://www.toutiao.com/api/article/feed/?category=essay_joke&utm_source=toutiao&widen=1&max_behot_time=1500114422&max_behot_time_tmp=1500114422&tadrequire=true&as=A1F52966E9EEF00&cp=59692E6FD0E09E1

搜索： https://www.toutiao.com/search_content/?offset=相對(duì)位置&format=json&keyword=關(guān)鍵詞&autoload=true&count=20&cur_tab=1

還可以參考今日頭條Api分析

最后

本項(xiàng)目作為自己的學(xué)習(xí)記錄，還有許多需要改進(jìn)的地方，也希望可以幫到有需要的小伙伴，一起進(jìn)步。

Ps：我不介意有好多好多star[捂臉]

Github

Blog

參考

hcy1996的項(xiàng)目

vue-lazyload實(shí)現(xiàn)圖片懶加載

jsonp跨域獲取數(shù)據(jù)

flexible.js淘寶的移動(dòng)端處理

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://hztianpu.com/yun/84503.html

相關(guān)文章

  • vue 仿今日頭條

    摘要：在下沒(méi)有該問(wèn)題。解決辦法部分這里隨意，需要用設(shè)定部分問(wèn)題懶加載解決方法稍后補(bǔ)充參考文獻(xiàn)組件按需加載路由懶加載項(xiàng)目中使用將多個(gè)組件合并打包并實(shí)現(xiàn)按需加載 vue 仿今日頭條 為了增加移動(dòng)端項(xiàng)目的經(jīng)驗(yàn)，近一周通過(guò) vue 仿寫今日頭條，以下就項(xiàng)目實(shí)現(xiàn)過(guò)程中遇到的問(wèn)題以及解決方法給出總結(jié)，有什么不正確的地方，懇請(qǐng)大家批評(píng)指正^?_?^！，代碼倉(cāng)庫(kù)地址為 github 一、實(shí)現(xiàn)功能 首頁(yè)展示...

    ShowerSun 評(píng)論0 收藏0

  • vue 仿今日頭條

    摘要：在下沒(méi)有該問(wèn)題。解決辦法部分這里隨意，需要用設(shè)定部分問(wèn)題懶加載解決方法稍后補(bǔ)充參考文獻(xiàn)組件按需加載路由懶加載項(xiàng)目中使用將多個(gè)組件合并打包并實(shí)現(xiàn)按需加載 vue 仿今日頭條 為了增加移動(dòng)端項(xiàng)目的經(jīng)驗(yàn)，近一周通過(guò) vue 仿寫今日頭條，以下就項(xiàng)目實(shí)現(xiàn)過(guò)程中遇到的問(wèn)題以及解決方法給出總結(jié)，有什么不正確的地方，懇請(qǐng)大家批評(píng)指正^?_?^！，代碼倉(cāng)庫(kù)地址為 github 一、實(shí)現(xiàn)功能 首頁(yè)展示...

    Sourcelink 評(píng)論0 收藏0

  • 原生控件ViewFlipper簡(jiǎn)單實(shí)現(xiàn)上下滾動(dòng)信息，仿淘寶、今日頭條（附源碼）

    摘要：滾動(dòng)信息最近項(xiàng)目中需要用到信息滾動(dòng)的效果，類似淘寶京東今日頭條的那種效果，于是網(wǎng)上看了一下，原來(lái)的原生控件中就有這個(gè)，于是我就寫了幾個(gè)效果，現(xiàn)在拿出來(lái)大家共同探討下。 滾動(dòng)信息Demo 最近項(xiàng)目中需要用到信息滾動(dòng)的效果， 類似淘寶、京東、今日頭條的那種效果， 于是網(wǎng)上看了一下， 原來(lái)Android的原生控件中就有這個(gè)View， 于是我就寫了幾個(gè)效果， 現(xiàn)在拿出來(lái)大家共同探...

    Amos 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<