本文主要是介绍Vue实现app中搜索页面的炫酷搜索热词布局样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
首先是效果图
-
可以自适应屏幕大小
-
可以每次刷新改变热词底色
在电脑显示如下
下面是实现过程
-
数据准备：原始数据为
["**********"] -
布局：
其中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以下的数
以上就是此组件实现的基本思路
这篇关于Vue实现app中搜索页面的炫酷搜索热词布局样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
