Vue实现魅族ebook读书app中搜索页面的搜索热词布局
来源:互联网 发布:淘宝商家直播入口 编辑:程序博客网 时间:2024/05/21 06:26
首先是效果图
可以自适应屏幕大小
可以每次刷新改变热词底色
在电脑显示如下
下面是实现过程
数据准备:原始数据为
["透视小医神","白鹿原","我的绝色美女房客","首席总裁:契约宠妻","仕途天骄","择天记","爆宠狂妻:神医五小姐","溺宠成妃","很纯很暧昧","我的名模总裁","极道军医","斗破苍穹"]
布局:
其中hotWords是上面的数据。以上代码是根据原始数据的个数自动生成hotWords.length个span元素
- 样式:
用到的是flex-wrap的特性:在一行排版拍不下的时候,可以根据屏幕大小自适应换行。
- 背景色每次刷新动态变化
实现这个功能只需要每次刷新的时候,返回的style的background-color的rgba的值每次动态变化就可以。
关键代码:
bcColor.push(`background-color: rgba(` + Math.ceil(Math.random() * 255) + `, ` + Math.ceil(Math.random() * 255) + `, ` + Math.ceil(Math.random() * 255) + `, ` + Math.random() + `)`)
每次刷新的时候rgb的每个值都是随机的255以下,a是1以下的数
以上就是此组件实现的基本思路。交流学习qq475804848。
阅读全文
0 0
- Vue实现魅族ebook读书app中搜索页面的搜索热词布局
- android中的热词搜索的实现
- android搜索热词(热门标签)流式布局的实现
- android搜索热词(热门标签)流式布局的实现
- 流式布局实现热搜和历史搜索
- ajax实现搜索热词下拉列表
- vue 实现简单的关键词搜索实例
- 热词搜索
- 实现在搜索结果页面中变色显示搜索关键字
- 搜索实现 app 本地搜索效果,有历史记录的
- iOS 搜索页面完美布局
- iOS之 搜索app的实现
- 仿Iphone中搜索结果的布局
- jQuery实现页面搜索
- 搜索页面实现总结
- 静态页面的搜索实现Jquery
- php在页面内搜索的实现
- 搜索热词动画效果
- 类加载器
- 12345
- 迭代器注意事项
- MVC基础
- 1949: JH说要ak啦!
- Vue实现魅族ebook读书app中搜索页面的搜索热词布局
- matlab数据类型及相关函数
- comparator接口与Comparable接口的区别
- Android调起相册,拍照,裁剪+6.0权限适配大总结
- MySQLTuner工具--效果
- Shader学习笔记(4)- 基本概念与基础效果(3)
- JS的数组(Array)
- 欢迎使用CSDN-markdown编辑器
- Ubuntu 14.04下部署FastDFS 5.08+Nginx 1.13.0