下载掌阅APP，畅读海量书库
立即打开
网站首页的导航栏共有6个菜单项。除了“首页”，还有5个菜单项，包括“全部产品”“换新服务”“官方商城”“加入智汇”和“商业合作”。导航栏的初始效果如图1.2所示。当用户单击某个导航菜单项时，该菜单项的样式会发生变化，效果如图1.3所示。
图1.2 导航栏的初始效果
图1.3 单击某个菜单项时的效果
设计导航栏的关键步骤如下。
（1）编写HTML代码，定义<div>元素，并设置其id属性值为app。在该元素中定义6个导航菜单项，使用v-on指令对每个菜单项的click事件进行监听，再对每个菜单项的class属性进行样式绑定。代码如下：
（2）编写CSS代码，用于为页面元素设置样式。其中，act类名定义用户单击导航栏中某个菜单项时的样式。代码如下：
（3）在<script>标签中，我们创建应用程序实例，并定义数据和方法。在methods选项中，我们定义select()方法，该方法会在用户单击某个菜单项时被调用。在select()方法中，我们将tag属性的值设置为传递的参数值，然后通过判断tag属性的值来确定是否在菜单项中使用act类的样式。代码如下：
说明
由于该项目只是实现企业官网的首页，因此导航栏并没有实际意义上的功能。读者如果感兴趣，可以自己设计导航栏菜单项对应的页面。
在智汇企业官网首页中，导航栏下方是企业活动图片展示界面。该界面列出了企业参加的一些地区展会活动的相关信息，包括展会图片、展会名称和图片简介。用户单击左右两侧的图片按钮，即可切换查看不同的展会图片。界面效果分别如图1.4和图1.5所示。
图1.4 宁波展会活动图片
图1.5 长春展会活动图片
活动图片展示界面的实现步骤如下。
（1）编写HTML代码，定义<div>元素，并在该元素中使用<transition-group>组件来实现切换展会图片时的过渡效果。在此组件中，我们对展会图片、展会名称和图片简介进行绑定。在<transition-group>组件后，我们定义两个<div>元素，这两个元素用于渲染左右两侧的图片按钮，同时我们对每个图片按钮的class属性进行样式绑定。代码如下：
（2）编写CSS代码，为元素设置过渡属性，以实现切换展会图片时的过渡效果。代码如下：
（3）在创建的应用程序实例中，定义以下数据：展会图片的索引i、展会图片信息的列表info、左侧图片按钮的列表leftBanner以及右侧图片按钮的列表rightBanner。代码如下：
企业新闻展示界面主要用于展示企业的新闻列表，这些新闻以从下向上滚动的形式进行展示。界面效果分别如图1.6和图1.7所示。
图1.6 最新消息列表
图1.7 最新消息列表向上滚动
企业新闻展示界面的实现步骤如下。
（1）编写HTML代码，定义<div>元素，在该元素中定义ul列表，并对该列表的style属性进行样式绑定。当触发列表的mouseenter事件时，调用stop()方法；当触发列表的mouseleave事件时，调用up()方法。接着，对ul列表中的li列表项使用v-for指令，对最新消息列表news_list进行遍历，并在遍历时调用subStr()方法对企业新闻标题进行截取。代码如下：
（2）编写CSS代码，为div元素和ul列表设置样式。关键代码如下：
（3）在创建的应用程序实例中定义数据、方法和mounted()钩子函数。scrollUp()方法用于实现最新消息列表向上滚动的效果，stop()方法用于停止向上滚动效果，up()方法用于调用scrollUp()方法实现列表的向上滚动效果。subStr()方法用于截取消息标题的前20个字符。在mounted()钩子函数中调用scrollUp()方法，在文档渲染完毕后实现列表的向上滚动效果。代码如下：
产品推荐界面主要展示了企业的推荐产品列表，并提供了产品检索功能。用户可以在文本框中输入检索关键字，然后单击“产品检索”按钮，界面下方会显示检索到的产品列表。界面效果分别如图1.8和图1.9所示。
图1.8 产品推荐列表
图1.9 检索结果
产品推荐界面的实现步骤如下。
（1）编写HTML代码，定义两个<div>元素。其中：在第一个<div>元素中定义一个用于输入检索关键字的文本框和一个图片按钮，使用v-model指令将该文本框和keyword属性进行绑定，当单击图片按钮时调用search()方法；在第二个<div>元素中定义一个ul列表，在该列表中使用v-for指令对检索结果列表searchResult进行遍历，在遍历时输出产品图片和产品名称。代码如下：
（2）编写CSS代码，为<div>元素、文本框和ul列表设置样式。关键代码如下：
（3）在创建的应用程序实例中，我们定义数据和方法。其中，product属性用于表示检索前的原产品列表。search()方法用于判断检索关键字是否为空。如果检索关键字为空，search()方法会将检索结果设置为原产品列表；否则，该方法会根据检索关键字对原产品列表product进行过滤，并将检索到的结果保存在searchResult列表中。代码如下：
在界面右侧有一个浮动窗口，无论用户拖动界面中的横向滚动条还是纵向滚动条，该窗口的位置都保持不变。该浮动窗口主要展示“至诚服务”“在线客服”和“附近门店”选项。浮动窗口效果如图1.10所示。
图1.10 浮动窗口
浮动窗口的实现步骤如下。
（1）编写HTML代码，定义<div>元素，并对该元素的style属性进行样式绑定。在该元素中，添加组成浮动窗口的多个元素。代码如下：
（2）编写CSS代码，为div元素和span元素设置样式。关键代码如下：
（3）在创建的应用程序实例中，我们定义数据。其中，rightDis属性表示浮动窗口到页面右侧的距离，而topDis属性则表示浮动窗口到页面顶部的距离。在mounted()钩子函数中，我们添加窗口的onscroll事件监听器，以便在滚动条被拖动时动态地设置浮动窗口到页面顶部和右侧的距离。代码如下：
说明
在设计浮动窗口时，在mounted()钩子函数中，我们为Window对象添加了onscroll事件监听器，由于事件处理程序中的this和Vue实例中的this指向不同的作用域，因此在使用onscroll事件监听器之前，我们需要对this进行重新赋值。