首页 / VUE / vue实现仿今日头条首页选项卡的功能
vue实现仿今日头条首页选项卡的功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue实现仿今日头条首页选项卡的功能,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2971字,纯文字阅读大概需要5分钟。
内容图文
![vue实现仿今日头条首页选项卡的功能](/upload/InfoBanner/zyjiaocheng/286/0e5130d060064d739b6966a4b7b7c5a7.jpg)
为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结。
一、实现功能
首页展示
查看消息
图文懒加载
滑动选项卡,切换频道,点击频道切换不同新闻
点击选项卡的 + 按钮,实现频道的添加和删除
点击搜索按钮,输入关键字,回车进行实时搜索,在结果中高亮显示关键字
点击导航栏的刷新按钮只实现了按钮的旋转特效,并没有实现页面刷新加载功能
二、功能小结
2.1 选项卡封装为一个组件,滑动选项卡效果如下:
使用弹性布局,部分代码实现如下:
<ul class="silder-list"> <li v-for="(item,index) in tabArr" @click="changeTab(index,item)" :class="{'current': 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°旋转
解决办法:
类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 问题:组件按需加载(其他方法见参考文献)
解决办法:
{ path: '/promisedemo', name: 'PromiseDemo', component: resolve => require(['../components/PromiseDemo'], 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; $('.container').css('height',winHeight+'px');
相关文章推荐:
vue指令与$nextTick操作DOM有什么区别?
vue中的事件阻止冒泡的用法详解
以上就是vue实现仿今日头条首页选项卡的功能的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的vue实现仿今日头条首页选项卡的功能全部内容,希望文章能够帮你解决vue实现仿今日头条首页选项卡的功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。