navigator+hover-class+小程序路由

1.实现效果

navigator+hover-class+小程序路由_第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。
navigator+hover-class+小程序路由_第2张图片

tips:

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

4.小程序路由

navigator+hover-class+小程序路由_第3张图片

区别:

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,返回上个页面。

你可能感兴趣的:(前端小程序css)