小程序学习（三）

参考链接：[https://blog.youkuaiyun.com/u010496966/article/details/86470964

如何实现微信页面的跳转

(https://blog.youkuaiyun.com/u010496966/article/details/86470964)
首先我们需要先设计出两个页面，以便查看跳转效果。两个页面分别是下图所示：

在这里，我的设计是在点击每周推荐时能够实现页面的跳转，基本代码是这样：

使用此代码已经可以实现跳转功能，介绍一下open-type属性，该属性可以有四个值可以进行设定：

navigate：保留当前页面。跳转到应用的某个页面
redirect:： 关闭当前页面，跳转到应用内的某个页面
reLaunch：关闭所有页面，打开到应用内的某个页面
switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

跳转功能实现了，如果我们想要达到点击态的样式效果，那就还需要用到一个属性：hover-class属性。
下面是详细代码：

<view class='container'>
<image class='about-banner' src='/image/music.jpg'></image>
<text style='font-weight:bold;font-size:60rpx'>音乐抢先听</text>
<view>
<navigator style='display:inline;'url='/pages/week/week' open-type="navigate" hover-class='nav-hover'class='nav-default'>每周推荐</navigator><text>精彩好歌</text>
</view>
<text>我的微博：weibo.com/simbasong</text>
</view>

点击时想要达到的效果需要在页面对应的样式表中定义样式效果

上图所呈现的效果就是在没有进行点击时，文字为蓝色，点击进行查看时文字变为红色。
至此，如何实现页面的跳转以及达到点击态的样式效果的学习就基本完成。