微信小程序_导航组件

#导航组件#

>navigator页面链接组件

        >该组件用来在WXML页面中实现跳转

        >它有3种类型：

                >保留当前页跳转，跳转后可返回当前页，与 wx.navigateTo效果一样

                >关闭当前页跳转，无法返回当前页，与wx.redirectTo效 果一样

                >跳转到底部标签导航指定的页面，与wx.switchTab跳转 效果一样

        >以上跳转效果是通过open-type属性来控制的

navigator页面链接属性

属性	类型	默认值	说明
url	string		当前小程序内的跳转链接
open-type	string	navigate	跳转方式。self:当前小程序， miniProgram:基它小程序
target	string	self	在哪个目标上发生跳转，默认当前小 程序
hover-class	string	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-start-time	number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	number	600	手指松开后点击态保留时间，单位毫 秒

 

值	说明
navigate	对应wx.navigateTo或wx.navigateToMiniProgram的功能
redirect	对应 wx.redirectTo 的功能
switchTab	对应 wx.switchTab 的功能
reLaunch	对应 wx.reLaunch 的功能
navigateBack	对应 wx.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效

        示例代码：

<!-- sample.wxml -->

<view class="btn-area">
    <navigator url="/page/navigate/navigate?title=navigate" hoverclass="navigator-hover">跳转到新页面</navigator>

    <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>

    <navigator url="/page/index/index" open-type="switchTab" hoverclass="other-navigator-hover">切换Tab</navigator>

    <navigator target="miniProgram" open-type="navigate" app-id="" 
path="" extra-data="" version="release">打开绑定的小程序</navigator>
</view>

<!-- navigator.wxml -->

<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到之前页面 </view>

<!-- redirect.wxml -->

<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到上级页面 </view>

Page({
    onLoad: function(options) {
        this.setData({
            title: options.title
        })
    }
})

>wx.navigateTo保留当前页跳转

        >该组件保留当前页面并跳转到应用内的某个页面

        >使用wx.navigateBack可以返回到原页面

wx.navigateTo属性

属性	类型	默认值	说明
url	string	是	需要跳转的应用内非tabBar的页面的路径， 路径后可以带参数。参数与路径之间使用? 分隔，参数键与参数值用=相连，不同参数 用&分隔； 如’path?key=value&key2=value2’
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数(调用成功、失败 都会执行)

>wx.redirectTo关闭当前页跳转

        >该组件关闭当前页面，跳转到应用内的某个页面

wx.redirectTo属性

属性	类型	默认值	说明
url	string	是	需要跳转的应用内非tabBar的页面的路径， 路径后可以带参数。参数与路径之间使用? 分隔，参数键与参数值用=相连，不同参数 用&分隔； 如’path?key=value&key2=value2’
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数(调用成功、失败 都会执行)

>wx.switchTab跳转到tabBar页面

        >该组件跳转到tabBar页面，并关闭其他所有非 tabBar页面

wx.switchTab属性

属性	类型	默认值	说明
url	string	是	需要跳转的应用内非tabBar的页面的路径， 路径后可以带参数。参数与路径之间使用? 分隔，参数键与参数值用=相连，不同参数 用&分隔； 如’path?key=value&key2=value2’
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数(调用成功、失败 都会执行)

        >注意：

                >wx.navigateTo和wx.redirectTo不允许跳转到tabBar页面

                >只能用wx.switchTab跳转到tabBar页面

>wx.navigateBack返回上一页

        >该组件关闭当前页面，返回上一页面或多级页面

        >可通过getCurrentPages()获取当前的页面栈 ，决定需要返回几层

wx.navigateBack属性

属性	类型	默认值	说明
delta	number	1	返回的页面数，如果delta大于现有页面数， 则返回到首页

>设置导航条

        >wx.setNavigationBarTitle(OBJECT)动态 设置当前页面的标题 

wx.setNavigationBarTitle(OBJECT)属性

属性	类型	默认值	说明
title	string	是	页面标题
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数(调用成功、失败 都会执行)

...持续学习完善中。

---

#学无止境#