首页 >web前端 >js教程 >vue实现仿今日头条首页选项卡的功能

vue实现仿今日头条首页选项卡的功能

不言原创: 2018-08-04 11:52:254397浏览

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

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

一、实现功能

首页展示
查看消息
图文懒加载
滑动选项卡，切换频道，点击频道切换不同新闻
点击选项卡的 + 按钮，实现频道的添加和删除
点击搜索按钮，输入关键字，回车进行实时搜索，在结果中高亮显示关键字
点击导航栏的刷新按钮只实现了按钮的旋转特效，并没有实现页面刷新加载功能

二、功能小结

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

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

 e1f1ea1a004eaf9462e764c238f030b7
    604c3cf4c3bf830cccaabeb0736b51c7{{item.title}}bed06894275b65c1ab86501b08a632eb
 929d1f5ca49e04fdcb27f9465b944689

c9ccee2e6ea535a969eb3f532ad9fe89
.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;
}
531ac245ce3e4fe3d50054a55f265927

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实现旋转动画
     348b6696154a2b432b0f3ff38f6602cb
     
      .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: &#39;/promisedemo&#39;,
                name: &#39;PromiseDemo&#39;,
                component: resolve => require([&#39;../components/PromiseDemo&#39;], resolve)
            }

2.8 问题：基于 vue 的实时搜索，在结果中高亮显示关键字
解决办法：

 万能的"replace"函数, searchKey 为关键字
     title = title.replace(this.searchKey, `<span style=\"color: red;font-weight: 500;\">${this.searchKey}</span>`)

2.8 问题：基于 vue 的实时搜索，在结果中高亮显示关键字
解决办法：

    万能的"replace"函数, searchKey 为关键字
     title = title.replace(this.searchKey, `<span style=\"color: red;font-weight: 500;\">${this.searchKey}</span>`)

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;
        $(&#39;.container&#39;).css(&#39;height&#39;,winHeight+&#39;px&#39;);

vue实现仿今日头条首页选项卡的功能

相关文章