news contents
新闻资讯

如何实现微信小程序路由跳转指定页面?-ag凯发

发表日期:2017-07-30 11:50      浏览次数: 次

a_73663985.jpg

如何实现微信小程序路由跳转指定页面?微信小程序路由跳转,共有三种形式,页面中使用navigator组件做页面链接形式路由跳转,js中可以使用wx.navigateto--保留当前页面,跳转到应用内的某个页面,wx.redirectto--关闭当前页面,跳转到应用内的某个页面 wx.navigateback()--关闭当前页面,回退前一页面。

页面链接。

属性名 类型 默认值 说明
url string   应用内的跳转链接
redirect boolean false 是否关闭当前页面
hover-class string navigator-hover 指定点击时的样式类,当hover-class="none"时,没有点击态效果

注:navigator-hover默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, 的子节点背景色应为透明色

示例代码:

/** wxss **//** 修改默认的navigator点击态 **/
.navigator-hover 
{    
color:blue;
}
/** 自定义其他点击态样式类 **/
.other-navigator-hover 
{    
color:red;
}
  跳转到新页面  在当前页打开(关闭了当前页面)
 {{title}}  点击左上角返回回到之前页面
 {{title}}  点击左上角返回回到上级页面
// redirect.js navigator.jspage({  
onload: function(options) 
{    
this.setdata
({      
title: options.title
 })
 }
})

wx.navigateto(object)

保留当前页面,跳转到应用内的某个页面,使用wx.navigateback可以返回到原页面。

object参数说明:

参数 类型 必填 说明
url string 需要跳转的应用内页面的路径
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

wx.navigateto({  url: 'test?id=1'})

注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。

wx.redirectto(object)

关闭当前页面,跳转到应用内的某个页面。

object参数说明:

参数 类型 必填 说明
url string 需要跳转的应用内页面的路径
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

wx.redirectto({  url: 'test?id=1'})

wx.navigateback()

关闭当前页面,回退前一页面。


本文链接为: http://www.bvvd.cn/jm/news/zxzs/72.html 转载请说明出处!

分享到:0用手机看

试试用app扫一扫,
在你手机上继续观看此页面。

官方微信

在线客服