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

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

不言
发布: 2018-08-04 11:52:25
原创
4419 人浏览过

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

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

一、实现功能

  • 首页展示

  • 查看消息

  • 图文懒加载

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

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

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

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

二、功能小结

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

3631394842-5b64495faa2ea_articlex.gif

使用弹性布局,部分代码实现如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

 <ul class="silder-list">

    <li v-for="(item,index) in tabArr"  @click="changeTab(index,item)" :class="{&#39;current&#39;:  currentIndex === index}" :key="item.id">{{item.title}}</li>

 </ul>

 

<style>

.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;

}

</style>

登录后复制

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°旋转
    解决办法:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

     类rotate实现旋转动画

     <img src="../assets/img/refresh.png" class="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 问题:组件按需加载(其他方法见参考文献)
        解决办法:      

1

2

3

4

5

{

               path: &#39;/promisedemo&#39;,

               name: &#39;PromiseDemo&#39;,

               component: resolve => require([&#39;../components/PromiseDemo&#39;], resolve)

           }

登录后复制

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

1

2

万能的"replace"函数, searchKey 为关键字

    title = title.replace(this.searchKey, `<span style=\"color: red;font-weight: 500;\">${this.searchKey}</span>`)

登录后复制

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

1

2

万能的"replace"函数, searchKey 为关键字

 title = title.replace(this.searchKey, `<span style=\"color: red;font-weight: 500;\">${this.searchKey}</span>`)

登录后复制

2.9 问题:解决安卓平台下,input标签被遮挡问题,用户点击 input 时,父级元素上移,其他元素不变。在 ios 下没有该问题。
解决办法:
css部分:

1

2

3

4

5

6

7

8

9

10

11

body{

      width:100%;

      height:100%;

      overflow:scrool;

  }

  .container{

      width: 100%;

      height: (这里随意,需要用js设定);

      position: absolute;

      top: 0;

  }

登录后复制

js部分:

1

2

var winHeight = document.documentElement.clientHeight;

 $(&#39;.container&#39;).css(&#39;height&#39;,winHeight+&#39;px&#39;);

登录后复制

相关文章推荐:

vue指令与$nextTick操作DOM有什么区别?

vue中的事件阻止冒泡的用法详解

以上是vue实现仿今日头条首页选项卡的功能的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板