1.实现效果

在这里插入图片描述

2.navigator属性

navigator的open-type属性可选值 'navigate'、'redirect'、'switchTab'，对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能

open-type="navigate"等价于API的　wx.navigateTo　而wx.navigateTo的url是需要跳转的应用内非 tabBar 的页面的路径

open-type="redirect"等价于API的　wx.redirectTo　而wx.redirectTo的url是需要跳转的应用内非 tabBar 的页面的路径

open-type="switchTab"等价于API的　wx.switchTab而wx.switchTab的url是需要跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

3.hover-class属性

微信小程序中，可以用 hover-class 属性来指定元素的点击态效果。但是在在使用中要注意，大部分组件是不支持该属性的。
目前支持 hover-class 属性的组件有三个：view、button、navigator。

在这里插入图片描述

tips：

1.当 hover-class 的值为 none 时，组件上不会有任何点击态效果。
2.当指定了其他类的时候，与 hover-class产生冲突，若想保留hover-class的效果，需要将hover-class的类写在最下面，并且适当的使用!important来增加权重。

4.小程序路由

在这里插入图片描述

区别：

wx.navigateTo ：
保留当前页面、跳转到应用内的其他页面，对于页面不多的小程序，通常推荐使用 wx.navigateTo进行跳转，便于返回原页面，反之则不推荐使用。

wx.redirectTo ：
页面栈到达5 层，应该考虑选择 wx.redirectTo。关闭当前页面，跳转到应用内的某个页面。避免跳转前页面占据运行内存，但返回时页面需要重新加载

wx.reLaunch ：
与 wx.redirectTo()的用途基本相同，先关闭了内存中所有保留的页面，再跳转到目标页面。它也能实现从非 tab bar 跳转到 tab bar，或在 tab bar 间跳转，效果等同 wx.switchTab()。

wx.switchTab ：
跳转到 tab bar 的页面，关闭所有非 tab bar 的页面。使用其他跳转 API 来跳转到 tab bar，则会跳转失败。

wx.navigateBack：
关闭当前页面，并返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。这个 API 需要填写的参数只有 delta，表示要返回的页面数。若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。当不填写 delta 的值时，就默认其为 1，返回上个页面。