在本章中，你将学会使用中继器和交互动作创建一个NavigationPage导航页网站。
需求背景
在日常工作过程中，我们常常会需要访问很多网站，查找资料、浏览资讯……用的多的，就产生了一批需要经常使用的网站。而对于这些网站，我们可能会使用浏览器的书签功能，将它们聚合在一起。
但有些时候，书签多了也就不太好找了，网上其他其他的导航使用起来也不太顺手。
那么，我们能不能自己搭建一个专属于个人的导航页呢？
说干就干！
项目创建
首先，创建一个新项目，命名为Navigation。
基础样式-顶部导航栏
首先，我们给整个页面背景加个填充颜色。
我们在“样式”工具栏中设置背景颜色为#F5F7FD。
我们来完成下顶部导航栏的设计。
拖入一个“动态面板”组件，命名为“顶栏”。
设置动态面板的位置为(0，0)，大小为1366*768，勾选“100%宽度”，设置填充颜色为#1890FF。
然后我们加个标题。
拖入一个“三级标题”组件，命名为“标题”。
设置它的位置在“顶栏”动态面板上面，且和“顶栏”动态面板上下居中，距离左右100，设置字体大小为17，字体颜色为#FFFFFF。
这样，我们就完成了顶部导航栏的基础样式。
基础样式-导航卡片
下面，我们制作下单张导航卡片。
拖入一个“矩形1”组件，命名为“导航卡片”。
设置位置为（40，100），卡片尺寸为150*150，内部文字大小为14，字体设置为“透明”，卡片边框线段宽度设置为0，卡片圆角设置为8。
这里说明下为什么导航卡片内的文字要变成透明色，这是因为之后我们需要导航卡片中展示url链接地址的文字，点击的时候按照导航卡片的文字进行打开新的标签页，这在后面会说明使用方法。
拖入一个“矩形2”组件，命名为“logo背景”。
设置logo背景的尺寸为60*40，它的位置在导航卡片中间，距离上方30，下方60，左右居中，设置圆角为8。
这块是为了让我们加载logo图片时，保持展示样式的统一性。
拖入一个“图片”组件，命名为“image”。
设置尺寸为46*46，位于logo背景上下左右都居中的位置。
这块我们用来展示logo图片。
拖入一个“文本标签”组件，命名为“name”。
设置它的位置为导航卡片下边距离为25，左右居中，字体排布位置为上下左右居中展示。
这一块，我们用来展示卡片名称。
以上，单张卡片我们就准备好了。
基础样式-中继器
下面我们要循环遍历这个卡片。
先全选整个卡片，点击组合，把整个卡片变成一个整体，将组合命名为“单张卡片”。
然后拖入一个“中继器”组件，删除里面的示例矩形，把“单张卡片”剪切粘贴进入。
记得中继器内的“单张卡片”组合，位置一定要设置为（0，0），这是中继器展示位置的起始位置。
点击中继器空白区域，在“交互”工具栏中，设置交互动作。
选择“每项加载”时，选择“设置文本”，目标为“导航卡片”，设置文本值为“[[item.url]]”。
在下面继续添加动作，选择“设置图片”，目标为“image”，设置为“值”，设置为“[[item.image]]”。
在下面继续添加动作，选择“设置文本”，目标为“name”，设置文本值为“[[item.name]]”。
这样我们就设置好了中继器的交互动作，并创建了关联。
下面我们赋予数据。
在“样式”栏中，在中继器数据中，修改表头名称分别为“name”、“image”、“url”。
我们分别给这三个参数赋值，注意的是“image”列，我们是右键选择导入的方式导入图片。
关闭中继器，看看效果。
我们已经得到了想要的数据展示效果。
但这里我们发现一个问题，中继器排布方式为纵向排布。
这时我们还需要调整中继器的排布方式。
选中中继器，设置它遍历卡片的间距的行间距和列间距为20，布局设置为“水平”，勾选“网格排布”，设置每行项的数量为7。
网格排布的作用是在水平排布时，限制每行最多展示多少张卡片。
自此，我们就完成了卡片导航的基础样式的绘制。
交互动作-打开新标签页
下面，我们来完成点击对应的导航卡片，浏览器对应打开相关的网站。
双击“中继器”进入内页，选中“单张卡片”组合。在“交互”工具栏中，点击“新建交互”，选择“单击时”，选择“打开链接”，选择“链接到URL或文件路径”，设置地址为“http://[[]item.url]]”，选择“更多选项”，选择打开在“新窗口/新标签”。
我们如此设置打开地址，系统就会根据我们实际点击的那一个卡片，找到中继器数据中对应的url，打开对应的网站。
我们在浏览器中预览下效果。
我们发现，已经实现了点击对应的导航卡片，打开对应的网站的交互动作啦！
交互动作-卡片移动
下面，我们再优化下交互效果。
为了能够让用户知道我们鼠标选择的是哪一个导航卡片，我们加一个移动的交互效果。
交互逻辑为：鼠标移到卡片时，卡片向上移动一点位置，鼠标移出卡片时，卡片回到初始位置。
我们在“交互”工具栏中，点击“新建交互”，选择“鼠标移入时”，选择目标为“单张卡片”组合，移动方式为“到达”，位置为（[[This.x]]，[[This.y-10]]），动画设置为“线性”，时长为200毫秒。
还是在“交互”工具栏中，点击“新建交互”，选择“鼠标移出时”，选择目标为“单张卡片”组合，移动方式为“到达”，位置为（[[This.x]]，[[This.y+10]]），动画设置为“线性”，时长为200毫秒。
我们完成后，再在浏览器中预览下效果。
我们输入移入时，卡片向上移动了10，鼠标移出时，卡片回到了原点。
交互动作-选中效果
下面我们再完善下交互效果。
上面我们完成了通过卡片移动来告知用户当前选中的是哪一个卡片，这还不够直观。
我们再加一个交互效果，当我们移入时，导航卡片加个填充颜色，表示我们鼠标移动到了这个位置，这样的效果更佳。
这里，我们可以使用“选中状态”来作为中间件。
我们在鼠标移入时和鼠标移出时，增加了一个交互动作，为“设置选中”。
当鼠标移入时，“单张卡片”设置值为“真”，鼠标移出时，“单张卡片”设置值为“假”。
然后我们选中“导航卡片”，请注意，这里选中的是那张白色卡片，而不是整个组合。在“交互”工具栏中，设置“交互样式”，选择“元件选中的样式”，勾选“填充颜色”，设置颜色为#7F7F7F，设置透明度为20%。
我们在浏览器中预览下效果。
恭喜你，完成了整个项目的创建！
当然你还可以按照以上的方式创建多几个中继器，再加上分组标题，达到以下的效果。
哈哈哈，效果不错！
为了让这个网站能够公开访问，我们可以生成html文件，然后发布到gitHub或者gitee中，这样就可以将网站分享给朋友们了。
网站地址
产品导航页：ricardowesley.gitee.io/pmgoo
快来动手试试吧！
如果本专栏对你有帮助，不妨点赞、评论、关注～
