Vue实现app中搜索页面的炫酷搜索热词布局样式

原创已于 2023-01-28 17:39:02 修改 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #响应式布局 #h5 #搜索 #vue-js

于 2017-05-29 17:06:57 首次发布

javascript 同时被 2 个专栏收录

3 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文介绍了一种自适应屏幕大小并能动态改变热词背景色的热词云组件实现方法。通过使用Flex布局和随机生成背景色的方式，使得热词能够根据屏幕尺寸自动调整布局并每次页面刷新时更换颜色。

首先是效果图

在这里插入图片描述

可以自适应屏幕大小
可以每次刷新改变热词底色

在电脑显示如下

在这里插入图片描述

下面是实现过程

数据准备：原始数据为["**********"]
布局：

在这里插入图片描述

其中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以下的数

以上就是此组件实现的基本思路