Vue2.0仿今日头条

pepperwang 发布于2019-08-20 18:26 / 1233人阅读

摘要：基于仿照今日头条的移动端项目源码地址预览地址前言先占个坑位。项目中还有许多可以完善的地方，不足之处希望小伙伴们可以，我会在这里更新。目前还没有全面地测试该项目，有问题提问，大家一起学习。

toutiao

基于Vue2.0仿照今日头条的移动端项目

源码地址：toutiao_Vue2.0

预览地址：toutiao_Vue2.0

前言

先占个坑位。

之前打算做个东西熟悉vue的使用，由于自己蛮喜欢刷手机看看新闻的，借鉴了其他同学的项目（链接在下面），自己也做了一个。项目中还有许多可以完善的地方，不足之处希望小伙伴们可以issue，我会在这里更新。目前还没有全面地测试该项目，有问题提问，大家一起学习。

技术栈

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

移动端布局：flexble.js

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

功能

各类新闻的查看

本地收藏新闻

新闻的搜索

待...

效果

移动端可以直接扫描，或者在chrome的device toolbard打开传送门

|- src
   |- assets
      |- image  // 项目图片
      |- style
         |- common.scss  // 移动端的单位的转换
         |- global.scss  // 全局样式
         |- newsList.scss  // 新闻列表的样式
         |- transition.scss  // 过渡样式
   |- components  // 组件
      |- Back.vue  // 返回
      |- Comment.vue  // 评论
      |- Footer.vue  // 页脚
      |- HomeNav.vue  // 新闻类型导航
      |- Loading.vue  // 加载
      |- Loadingmore.vue  // 加载更多
      |- Nav.vue  // 导航
      |- Newslist.vue  // 新闻列表
      |- Top.vue  // 返回顶部
      |- Warning.vue  // 出错提醒
   |- pages  // 主体页面
      |- About.vue // 信息页
      |- Collect.vue  // 收藏页
      |- Content.vue  // 文章页
      |- Home.vue  // 主页
      |- Search.vue  // 收藏页
      |- Session.vue  // 段子页
   |- router  // 路由
   |- store  // 状态管理
   |- App.vue
   |- main.js  // 入口文件
|- static
   |- collect.json  // 初始收藏
   |- imgerror.jpg  // 懒加载错误图片
   |- imgloading.jpg  // 懒加载中图片

更多细节在源码中会有一些注释

API

获取新闻：https://m.toutiao.com/list/?tag=新闻类型&ac=wap&count=20&format=json_raw&as=A125A8CEDCF8987&cp=58EC18F948F79E1&min_behot_time=时间

获取文章：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=相对位置&format=json&keyword=关键词&autoload=true&count=20&cur_tab=1

还可以参考今日头条Api分析

最后

本项目作为自己的学习记录，还有许多需要改进的地方，也希望可以帮到有需要的小伙伴，一起进步。

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

Github

Blog

参考

hcy1996的项目

vue-lazyload实现图片懒加载

jsonp跨域获取数据

flexible.js淘宝的移动端处理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84503.html

vue 仿今日头条

摘要：在下没有该问题。解决办法部分这里随意，需要用设定部分问题懒加载解决方法稍后补充参考文献组件按需加载路由懒加载项目中使用将多个组件合并打包并实现按需加载 vue 仿今日头条为了增加移动端项目的经验，近一周通过 vue 仿写今日头条，以下就项目实现过程中遇到的问题以及解决方法给出总结，有什么不正确的地方，恳请大家批评指正^ _ ^！，代码仓库地址为 github 一、实现功能首页展示...

ShowerSun 2019-08-29 16:16 评论0 收藏0
vue 仿今日头条

摘要：在下没有该问题。解决办法部分这里随意，需要用设定部分问题懒加载解决方法稍后补充参考文献组件按需加载路由懒加载项目中使用将多个组件合并打包并实现按需加载 vue 仿今日头条为了增加移动端项目的经验，近一周通过 vue 仿写今日头条，以下就项目实现过程中遇到的问题以及解决方法给出总结，有什么不正确的地方，恳请大家批评指正^ _ ^！，代码仓库地址为 github 一、实现功能首页展示...

Sourcelink 2019-08-23 10:40 评论0 收藏0
原生控件ViewFlipper简单实现上下滚动信息，仿淘宝、今日头条（附源码）

摘要：滚动信息最近项目中需要用到信息滚动的效果，类似淘宝京东今日头条的那种效果，于是网上看了一下，原来的原生控件中就有这个，于是我就写了几个效果，现在拿出来大家共同探讨下。滚动信息Demo 最近项目中需要用到信息滚动的效果，类似淘宝、京东、今日头条的那种效果，于是网上看了一下，原来Android的原生控件中就有这个View，于是我就写了几个效果，现在拿出来大家共同探...

Amos 2019-08-16 16:49 评论0 收藏0