vue 仿今日头条

ShowerSun 发布于2019-08-29 16:16 / 2706人阅读

摘要：在下没有该问题。解决办法部分这里随意，需要用设定部分问题懒加载解决方法稍后补充参考文献组件按需加载路由懒加载项目中使用将多个组件合并打包并实现按需加载

vue 仿今日头条

为了增加移动端项目的经验，近一周通过 vue 仿写今日头条，以下就项目实现过程中遇到的问题以及解决方法给出总结，有什么不正确的地方，恳请大家批评指正^ _ ^！，代码仓库地址为 github

一、实现功能

首页展示

查看消息

图文懒加载

滑动选项卡，切换频道，点击频道切换不同新闻

点击选项卡的 + 按钮，实现频道的添加和删除

点击搜索按钮，输入关键字，回车进行实时搜索，在结果中高亮显示关键字

点击导航栏的刷新按钮只实现了按钮的旋转特效，并没有实现页面刷新加载功能

二、功能小结

2.1 选项卡封装为一个组件，滑动选项卡效果如下：

使用弹性布局，部分代码实现如下：

 
    {{item.title}}

 2.2 问题：img 横向排列设置 display:inline-block时，有默认的间隙
     解决办法： 父元素添加 font-size：0；

 2.3 问题：vue 入口文件 main.js 引入 vuex 的 store 时不起作用
     解决办法： store 不可以大写

 2.4 问题：移动端通过控制根元素的 font-size 值实现设备的适配时，块级元素始终有默认的宽度
     解决办法： 我的理解是因为根元素始终有 font-size 的值，块级元素继承了font-size，所以给它重新设置font-size就可以改变元素的高度。

 2.5 问题：点击元素，该元素360°旋转
     解决办法： 
     类rotate实现旋转动画
     
     
      .rotate {
          -webkit-transform-style: preserve-3d;
          -webkit-animation: x-spin 0.7s linear;
        }
        @-webkit-keyframes x-spin {
          0% {
            -webkit-transform: rotateZ(0deg);
          }
          50% {
            -webkit-transform: rotateZ(180deg);
          }
          100% {
            -webkit-transform: rotateZ(360deg);
          }
        }

 2.7 问题：组件按需加载（其他方法见参考文献）
         解决办法： 
           {
                path: "/promisedemo",
                name: "PromiseDemo",
                component: resolve => require(["../components/PromiseDemo"], resolve)
            }

 2.8 问题：基于 vue 的实时搜索，在结果中高亮显示关键字
     解决办法：
     万能的```replace```函数, searchKey 为关键字
     title = title.replace(this.searchKey, `${this.searchKey}`)

 2.8 问题：基于 vue 的实时搜索，在结果中高亮显示关键字
     解决办法：
     万能的```replace```函数, searchKey 为关键字
     title = title.replace(this.searchKey, `${this.searchKey}`)

 2.9 问题：解决安卓平台下，input标签被遮挡问题，用户点击 input 时，父级元素上移，其他元素不变。在 ios 下没有该问题。
     解决办法：
     css部分：
        body{
            width:100%;
            height:100%;
            overflow:scrool;
        } 
        .container{
            width: 100%;
            height: （这里随意，需要用js设定）;
            position: absolute;
            top: 0;
        }    
        js部分：
        var winHeight = document.documentElement.clientHeight;
        $(".container").css("height",winHeight+"px");
  2.10 问题： 懒加载
       解决方法：稍后补充

参考文献

https://segmentfault.com/a/11...  组件按需加载
https://router.vuejs.org/zh/g...  路由懒加载
https://segmentfault.com/a/11...   项目中使用 webpack 将多个组件合并打包并实现按需加载

GPU云服务器云服务器今日头条和头条视频今日头条今日头条爬虫今日头条数据

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

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

Vue2.0仿今日头条

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

pepperwang 2019-08-20 18:26 评论0 收藏0
vue 仿今日头条

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

Sourcelink 2019-08-23 10:40 评论0 收藏0
React实战篇（React仿今日头条）

摘要：前言上次初学用写了个后台管理，这次便寻思写个移动端的项目。便有了这次的这个项目。然后通过来判断如何动画具体处理异步用来书写跟配置还有一些零零散散的知识点，就不介绍了，具体可以到上查看。个人博客在线观看地址前言上次初学用 react 写了个后台管理，这次便寻思写个移动端的项目。便有了这次的这个项目。这个项目以前写了个 vue 的版本。有兴趣的可以点击进入模拟数据用的是 Eas...

NicolasHe 2019-08-22 16:07 评论0 收藏0