...的 Web 界面。当和其它网络工具配合使用时，Vue.js 的优秀功能会得到大大加强。如今，已有许多开发人员开始使用 Vue.js 来取代 Angular 和 React.js 。那么对于 Angular 和 React.js ，开发者该如何选择呢？下面我们会对这两...

这篇文章给大家介绍的内容是关于vue实现仿今日头条首页选项卡的功能，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

为了增加移动端项目的经验，近一周通过 vue 仿写今日头条，以下就项目实现过程中遇到的问题以及解决方法给出总结。

一、实现功能首页展示

查看消息

图文懒加载

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

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

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

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

二、功能小结

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

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

• {{item.title}}

.silder-list{

width: 6.67rem;

height: .72rem;

padding: .1rem .1rem;

box-sizing: border-box;

overflow-x: scroll;

list-style: none;

display: -webkit-box;

}

.silder-list li{

width: .68rem;

height: .52rem;

font-size: .34rem;

padding: 0rem .24rem;

color: #505050bf;

}

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中的事件阻止冒泡的用法详解