这篇文章给大家介绍的内容是关于vue实现仿今日头条首页选项卡的功能，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
为了增加移动端项目的经验，近一周通过 vue 仿写今日头条，以下就项目实现过程中遇到的问题以及解决方法给出总结。
一、实现功能
首页展示
查看消息
立即学习“前端免费学习笔记（深入）”；
图文懒加载
滑动选项卡，切换频道，点击频道切换不同新闻
点击选项卡的 + 按钮，实现频道的添加和删除
点击搜索按钮，输入关键字，回车进行实时搜索，在结果中高亮显示关键字
点击导航栏的刷新按钮只实现了按钮的旋转特效，并没有实现页面刷新加载功能
二、功能小结
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');
登录后复制
相关文章推荐：
vue指令与$nextTick操作DOM有什么区别?
vue指令与$nextTick操作DOM有什么区别?
以上就是vue实现仿今日头条首页选项卡的功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2744553.html
