【原】微信小程序|navigator组件-实现页面跳转

问题描述

解决方案

利用navigator组件实现小程序页面间的跳转，给将要跳转的关键词加一个navigator组件，然后添加跳转页面的链接，再对其关键词进行修饰点击效果设置。但是在设置navigator组件的时候有两个注意点很容易犯错，在下面的注意事项中会有所介绍。

1.在wxml中使用navigator组件，添加页面链接。

navigator组件实现页面间的跳转；

url中是设置跳转页面的链接；

class="nav-default"设置关键词的修饰颜色；

hover-class="nav-hover"设置指定点击时的样式类。

<view>   <text >本周推荐</text>   <image  src="/pages/img/图片1.jpg"></image>   <view>     <navigator url="/pages/abc/abc" hover-class="nav-hover">复仇者联盟4     </navigator>   </view>   <text >点评：最精彩的科幻片</text>   <text >阅读量：200</text> </view>

2.在js中，设置页面中关键词的属性。

.container1{   height: 100vh;   display: flex;   flex-direction: column;   justify-content: space-around;   align-items: center; } .nav-default{   color:green } .nav-hover{   color: red }

点击前的图：

图1  首页面

点击时的图：

图2 点击时页面

点击后的图：

图3 跳转后页面

注意事项

1 一般关键词都是文本，装在<text>里面。而<text>里面用navigator组件是没有用的，<text>只能读取文本，所以使用navigator组件时需要用<view>封装。

2 由于css的优先级规则，当属性赋值发生冲突的时候，谁在后面定义谁的属性取值就会渗出，所以在定义点击样式的时候要定义在后面。

结语

navigator组件可以实现页面间的跳转，让页面不在复杂，结构更加清晰。要注意上述的事项。对于navigator组件的详细内容可以在微信开发文档的导航组件中学习。

END

主  编   |   王文星

责  编   |   江汪霖

 where2go 团队

---

微信号：算法与编程之美