vue 仿今日头条

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

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

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 将多个组件合并打包并实现按需加载

超融合服务器专线服务今日头条和头条视频今日头条今日头条爬虫今日头条数据

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

转载请注明本文地址：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
IOS每日精选源码，边缘识别导航条管理高仿今日头条语音查询汇率源码

摘要：边缘识别超级简单的导航条管理工具高仿今日头条频道选择弹框一个比较实用的侧边栏管理器联动，菜单悬停红点拖拽，爆炸效果带波浪的小球导航栏按钮封装语音查询汇率张实现的轮播图 CIDetector边缘识别 showImg(https://segmentfault.com/img/remote/1460000011984542?w=320&h=568); 超级简单的导航条管理工具EasyNavi...

Riddler 2019-06-25 11:42 评论0 收藏0
原生控件ViewFlipper简单实现上下滚动信息，仿淘宝、今日头条（附源码）

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

netScorpion 2019-06-25 12:46 评论0 收藏0