vue仿今日头条_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 问题: 懒加载
解决方法:稍后补充
参考文献
vue仿今日头条_vue 仿今日头条相关推荐
- vue仿今日头条_Vue仿今日头条实例详解
前言 vue也弄了一段时间了,前段时间一直想用vue写个移动端,加之年底也不是很忙,于是前几天便着手开始弄了,到今天为止也算是勉强能看了 因为也是纯粹的写写前端页面,所以数据方面用的是mock.js, ...
- vue仿今日头条_vue 仿今日头条 - osc_isfcy2fi的个人空间 - OSCHINA - 中文开源技术交流社区...
vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...
- vue 仿今日头条_Vue仿今日头条实例详解_莺语_前端开发者
前言 因为也是纯粹的写写前端页面,所以数据方面用的是mock. 账号: vue-toutiao 密码: 123456 如果你想修改接口,请copy一份在修改 如果你想后台接口也自己开发的话.可以阅读我 ...
- 今日头条安卓_今日头条加入“常用”小程序窗口,小游戏或将再次崛起?
安卓手机在今日头条7.1.8版本更新后,头条APP底部出现了[常用]标签,而点击后则会弹出小程序桌面.此前在今日头条上使用过的小程序会出现在此处.最好的位置+战略级的布局,已经很明确告诉我们,需要在今 ...
- 媒体AI配图的时代来临!巴比特今日起全面拥抱AIGC——头条图片,AI创作!
图片来源:由无界版图AI工具生成 2022年,AI绘画的创造力正在改变与"视觉内容"有关的整个产业链,10年后往回看,今天可能是历史的节点. 今天(10月25日),巴比特正式对外宣 ...
- python 今日头条 微头条_今日头条微头条范文-头条号的微头条你们都发些什么,该如何写?...
头条号的微头条你们都发些什么,该如何写? 心灵相约头条号.呼唤着,努力着,拼搏着,它属于努力地人们,是传播正能量的家园.今天起要根扎头条号,写出优秀地原创作品.头条号的朋友们努力吧!用心血和汗水浇灌头 ...
- python 头条_python-selenium登陆今日头条
https://blog.csdn.net/a942242856/article/details/88379727 #python-selenium登陆今日头条 在运营今日头条的过程当中,有时候未免要 ...
- 视频MD5修改工具(短视频去重) 自媒体如何解决视频重复问题头条视频去重 今日头条视频消重去...
视频去重方法批量处理去重消重去水印去logo软件 视频分析技术批量处理去重消重去水印去logo软件 youtubu 视频去重批量处理去重消重去水印去logo软件 utubu 视频去重批量处理去重消重去 ...
- python今日头条新闻爬虫_头条爬虫最新资讯
头条搜索的爬虫UA为"Bytespider"首写字母为大写.头条搜索的ip字段总共涉及 6 个 日前河南一家一家名为今日油条的网红店装修.logo与今日头条极其相似引起众金网友关注 ...
最新文章
- python【力扣LeetCode算法题库】836- 矩形重叠
- iTOP-4418/6818开发板支持双屏异显,双屏同显
- Sleep()和wait()方法的区别
- python热键+鼠标键盘控制
- 水滴公司再回应“线下违规”:核心是公司的管理问题
- Liver Writer打开以前的日志/页面
- 有乳胶枕吗_乳胶枕怎么挑?网传的踩鸡蛋检测法,实际不靠谱
- If you insist running as root, then set the environment variable RUN_AS_USER=root...
- 计算机视觉(三)——人脸识别
- 论文页眉奇偶页不同怎么设置_什么!论文排版这么简单的吗?!
- JetBrains:webstrom中代码模板设置
- Spring揭秘 — IoC
- 广告投放类型以及各大平台计费准则+推广常用评价指标
- 记事本改字体的代码java_记事本编程切换字体颜色 用java编写一个记事本程序
- windows下搭建ITS运行环境
- gedit变身为编程利器的简单配置
- 【北京科技大学成绩单打印网址】【中科院自动化所邮箱登录网址】等
- Jmeter之集合点与关联
- html img和背景图处理图片不拉伸_img固定宽度和高度,不规则图片变形问题的解决方法...
- matlab粒子群加约束条件_粒子群算法(PSO)MATLAB实现