vue 仿今日头条
vue 仿今日头条
为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 github
一、实现功能
- 首页展示
- 查看消息
- 图文懒加载
- 滑动选项卡,切换频道,点击频道切换不同新闻
- 点击选项卡的 + 按钮,实现频道的添加和删除
- 点击搜索按钮,输入关键字,回车进行实时搜索,在结果中高亮显示关键字
- 点击导航栏的刷新按钮只实现了按钮的旋转特效,并没有实现页面刷新加载功能
二、功能小结
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');
2.10 问题: 懒加载
解决方法:稍后补充
参考文献
https://segmentfault.com/a/11... 组件按需加载
https://router.vuejs.org/zh/g... 路由懒加载
https://segmentfault.com/a/11... 项目中使用 webpack 将多个组件合并打包并实现按需加载
来源:https://segmentfault.com/a/1190000015881295
vue 仿今日头条的更多相关文章
- vue2.0仿今日头条开源项目
vue-toutiao 这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版. 前言 本人是 今日头条 的重度用户,在学习vue.js过程中,在GitHub ...
- [Android] Android 手机下 仿 今日头条 新闻客户端
利用一个月的时间,自学了 Android 开发 ,为了检验学习成果,特意 开发了这个 仿 今日头条 新闻客户端 AppNews 包括图文新闻+视频新闻+图片新闻 预览演示如下: 功能说明: 1)底部 ...
- iOS仿今日头条滑动导航
之前写了篇博客网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问 ...
- Android 仿今日头条频道管理(下)(GridView之间Item的移动和拖拽)
前言 上篇博客我们说到了今日头条频道管理的操作交互体验,我也介绍了2个GridView之间Item的相互移动.详情请參考:Android 仿今日头条频道管理(上)(GridView之间Item的移动和 ...
- android仿今日头条App、多种漂亮加载效果、选择器汇总、记事本App、Kotlin开发等源码
Android精选源码 android漂亮的加载效果 android各种 选择器 汇总源码 Android仿bilibili搜索框效果 Android记事本app.分类,涂鸦.添加图片或者其他附件 仿 ...
- 仿今日头条最强顶部导航指示器,支持6种模式-b
项目中经常会用到类似今日头条中顶部的导航指示器,我也经常用一个类似的库PagerSlidingTabStrip,但是有时并不能小伙伴们的所有需求,所以我在这个类的基础上就所有能用到的情况做了一个简单的 ...
- 自适应 Tab 宽度可以滑动文字逐渐变色的 TabLayout(仿今日头条顶部导航)
TabLayout相信大家都用过,2015年Google大会上发布了新的Android Support Design库里面包含了很多新的控件,其中就包含TabLayout,它可以配合ViewPager ...
- Android 仿今日头条频道管理(上)(GridView之间Item的移动和拖拽)
前言 常常逛今日头条.发现它的频道管理功能做的特别赞.交互体验很好.如图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fo ...
- Android之仿今日头条顶部导航栏效果
随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...
随机推荐
- pycharm上传代码到码云错误现象用户密码
>>出现此时错误说明在pycharm>git登录用户名或密码是错误的(必须填成是自己注册的码云邮箱和密码 不允许出现中文)并且无法在当前修改用户名或密码 >>接下来打开电 ...
- Apple激活日期查询
需要输入的信息为苹果产品的序列号 查看您的保修服务和支持期限 - Apple 支持 或者通过果粉查询网站获取结果
- python--文本处理1
1.字符和字符值之间的转换 内建函数:ord(),chr() >>> print ord("a") 97 >>> print chr(97) a ...
- Leetcode 232 Implement Queue using Stacks 和 231 Power of Two
1. 232 Implement Queue using Stacks 1.1 问题描写叙述 使用栈模拟实现队列.模拟实现例如以下操作: push(x). 将元素x放入队尾. pop(). 移除队首元 ...
- linux内核I2C子系统学习(三)
写设备驱动: 四部曲: 构建i2c_driver 注册i2c_driver 构建i2c_client ( 第一种方法:注册字符设备驱动.第二种方法:通过板文件的i2c_board_info填充,然后注 ...
- sql的一些知识_高级
1.视图 http://www.cnblogs.com/wang666/p/7885934.html 2.存储过程 http://www.cnblogs.com/wang666/p/7920748.h ...
- CentOS6.5_64bit下编译安装MySQL-5.6.23
转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/44785511 ************************************** ...
- C 标准库 - <signal.h>
C 标准库 - <signal.h> 简介 signal.h 头文件定义了一个变量类型 sig_atomic_t.两个函数调用和一些宏来处理程序执行期间报告的不同信号. 库变量 下面是头文 ...
- 使用JDBC连接SQL Server
源文:http://bbs.bc-cn.net/dispbbs.asp?boardid=12&id=140292 整理:秋忆 接触Java或者JSP,难免会使用到数据库SQL Server 2 ...
- Mataplotlib绘图和可视化
Mataplotlib是一个强大的python绘图和数据可视化工具包 安装方法:pip install matplotlib 引用方法:import matplotlib.pyplot as plt ...